Sass-Loader 和 Webpack 3.6 — 意外的标记“.”在 .scss 上解析

Question

我正在尝试使用 webpack 3.6 来解析我的 scss 文件。哪些是在.js中导入的，比如import styles from './index.scss'; 但是，我在构建时收到以下错误：

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;

这是我的 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
                }]
            }
        ],
    },
};

这与他们在 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"
  }
}

为什么我会收到此 Unexpected symbol 错误？

Answer 1

Webpack 3.x 弃用 module.loaders 作为属性。请改用 module.rules

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

Answer 2

这成功了，加上已经提到的，使用 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

万一其他人遇到同样的错误消息 - 我的问题的解决方案是我有 webpack 运行 --watch 并更改 package.config.js 就像添加 sass-loader 是没有捡到。重启webpack后编译正常

Sass-Loader 和 Webpack 3.6 — 意外的标记“.”在 .scss 上解析

Sass-Loader & Webpack 3.6 — Unexpected token '.' on .scss parse

javascript

reactjs

webpack

sass-loader