Webpack 4 Module parse failed: Unexpected character '@' (1:0)

Question

I get this error when i try to run npm run dev to compile my scss to css. I know that issue is related to @import

ERROR in ./src/scss/m

Answer 1

The issue is within your module.rule for handling SASS related files within your project. Within your rule you're only including the SASS files from within your /src/sass/ directory to be compiled into CSS:

{
   test: /\.scss$/,
   include: [
      path.resolve(__dirname, 'src', 'sass')
   ],
   use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}

However, a quick scan of your directory structure shows that your index.js file is actually importing your main.scss file from within the src/scss/ directory:

index.js:

import "./scss/main.scss";.

This is a problem because your SASS rule is only going to compile SASS related files to CSS from within the src/sass directory, but your SASS related files are actually located within your src/scss directory.

Therefore, your SASS files are never actually compiled to CSS appropriately.

To resolve this either remove the include part all together or change the include location to the correct path location of your SASS files:

include: [ path.resolve(__dirname, 'src', 'scss') ],

Another thing I would consider doing is adding the .scss extension to your imports within your main.scss file:

@import "header.scss";

or alternatively adding a resolve section within your webpack.config.js file so you can simplify your imports and still have webpack handle them appropriately. Something along the lines of:

resolve: {
    extensions: ['.js', '.jsx', '.scss']
}

Hopefully that helps!