ModuleParseError with NextJs - reactjs

Question

I try to migrate my app created with create-react-app to nextJs, and I got always this error :
[ error ] ./src/sass/common.scss
ModuleParseError: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
and here my file next.config.js :
const withPlugins = require("next-compose-plugins");
const withBundleAnalyzer = require("#next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true"
});
const withSass = require("#zeit/next-sass");
const withCSS = require("#zeit/next-css");
const withImages = require("next-images");
module.exports = withPlugins(
[withBundleAnalyzer, withImages, withSass, withCSS],
{
webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
config.module.rules.push({
test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/,
use: [
defaultLoaders.babel,
{
loader: "url-loader",
options: {
limit: 100000,
name: "[name].[ext]"
}
}
]
});
return config;
}
});
and my package.json :
"devDependencies": {
"css-loader": "^3.4.2",
"cypress": "^3.1.0",
"file-loader": "^5.0.2",
"node-sass": "^4.13.1",
"redux-devtools": "^3.5.0",
"sass-loader": "^8.0.2",
"url-loader": "^3.0.0"
}
I don't understand... I have a loader for file scss, if someone could explain to me, thanks you!

Answer 1

You didn't add loader for SCSS file type. You can do it like this:
config.module.rules.push({
test: /\.(scss)$/,
loaders: [
{
loader: 'css-loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production',
},
},
{
loader: 'sass-loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production',
},
},
],
});
Here I use two loaders. sass-loader convert your SCSS to CSS, then run through css-loader to process #import(), url(), etc.
Don't forget to install these two loaders using npm install.