Sass-Loader和Webpack 3.6 —意外令牌“。” 在.scss解析

Question

I'm trying to use webpack 3.6 to parse my scss files. Which are imported in the .js like import styles from './index.scss'; However, I get the following error on build:

SyntaxError: D:/Stack/Hespen Development/Website/react-boilerplate/src/components/home/index.scss: Unexpected token (3:0)
  1 | $color: green;
  2 | 
> 3 | .home {
    | ^
  4 |   display: flex;
  5 |   flex-direction: column;
  6 |   align-items: center;

This currenlty is my webpack.config

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: [
        'webpack-hot-middleware/client',
        path.resolve(__dirname, 'src'),
    ],
    output: {
        path: path.resolve(__dirname, 'src'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development'),
                WEBPACK: true,
            },
        }),
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react-hmre'],
                    },
                },
                include: path.resolve(__dirname, 'src'),
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
            }
        ],
    },
};

This is as described on their Github page

{
 "name": "react-boilerplate",
  "version": "0.0.1",
  "main": "src/index.js",
  "scripts": {
    "lint": "eslint ./src",
    "start": "cross-env NODE_ENV=development babel-node ./server.js ",
    "build": "rimraf dist && webpack --config ./webpack.config.prod.js",
    "serve": "cross-env NODE_ENV=production babel-node ./server.js"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-eslint": "^8.0.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.5.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.4",
    "eslint": "^4.3.0",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-react": "^7.1.0",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "history": "^4.7.2",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-redux": "^5.0.5",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.1.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "redux": "^3.5.2",
    "rimraf": "^2.5.4",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.12.2"
  },
  "dependencies": {
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2"
  }
}

Why do I get this Unexpected symbol error?

Answer 1

Webpack 3.x deprecated module.loaders as a property. Use instead module.rules

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
...

Answer 2

This did the trick, together with what was already mentioned, using module.rules:

{
    test: /\.(css|scss)$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
                loader: 'css-loader',
                options: {
                    modules: true,
                    importLoaders: 1,
                    sourceMap: true,
                },
            },
            {
                loader: 'postcss-loader',
                options: {
                    sourceMap: true,
                },
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true,
                },
            },
        ],
    }),
},

Answer 3

In case anyone else comes across this same error message - the solution for my problem was that I had webpack running with --watch and changes to package.config.js like adding sass-loader are not picked up. After I restarted webpack, the compile worked fine.