Javascript Sass装载机和；网页3.6—；意外标记''；关于.scss解析

我正在尝试使用Webpack3.6解析我的

scss

文件。在

.js

中导入，类似于从“/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
                }]
            }
        ],
    },
};

这是在他们的网站上描述的

---

为什么我会将此

意外符号

错误？

Webpack 3.x不推荐的module.loaders作为属性。改用module.rules

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

---

使用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,
                },
            },
        ],
    }),
},

---

如果其他人遇到同样的错误消息，我的问题的解决方案是让webpack与一起运行——注意，对package.config.js的更改（如添加sass loader）不会被拾取。重新启动webpack后，编译工作正常

{
    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,
                },
            },
        ],
    }),
},