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

To solve this problem for Webpack 4, first install sass-loader, node-sass, style-loader, and css-loader via npm:

npm install sass-loader node-sass style-loader css-loader --save-dev

Then add this rules to the webpack.config.js:

module.exports = {
  module: {
    rules: [
      // ...Other rules,
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

Note: The order is important, e.g: Don't put css-loader before style-loader or you'll probably get weird erros!