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/main.scss Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import "header"; @ ./src/index.js 3:0-27

src/index.js import "./scss/main.scss";

src/scss/main.sccs

@import "header";

webpack.config.js

`
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    entry: { main: './src/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                include: [
                    path.resolve(__dirname, 'src', 'sass')
                ],
                use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin('dist', {}),
        new MiniCssExtractPlugin({
            filename: 'style.[contenthash].css',
        }),


  new HtmlWebpackPlugin({
        inject: false,
        hash: true,
        template: './src/index.html',
        filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
  };`

package.json

{
    "name": "post",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --mode production",
        "dev": "webpack --mode development"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "autoprefixer": "^8.2.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "clean-webpack-plugin": "^0.1.19",
        "css-loader": "^0.28.11",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.4.0",
        "node-sass": "^4.8.3",
        "postcss-loader": "^2.1.3",
        "sass-loader": "^6.0.7",
        "style-loader": "^0.20.3",
        "webpack": "^4.4.1",
        "webpack-cli": "^2.0.13",
        "webpack-md5-hash": "0.0.6"
    }
}

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 <path>/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!

Answer 2

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!