Question

我有以下webpack文件：

module.exports = {
    entry: './app.js',
    output: {
        filename: './build.js'
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/, // include .js files
                enforce: "pre", // preload the jshint loader
                exclude: /node_modules/, // exclude any and all files in the node_modules folder
                use: [
                    {
                        loader: "jshint-loader"
                    }
                ]
            }
        ],
        loaders: [
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules$/,
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

当我运行webpack时，我收到以下错误：

ERROR in ./style.scss
Module parse failed: /Users/alessandro.santese/Desktop/Alessandro/webpack-sass-es6/style.scss Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|   background-color: #ffa;
| 
 @ ./app.js 1:0-23

style.scss

body {
    background-color: #ffa;

    h1 {
        color: #000;
    }
}

Answer 1

您使用的是Webpack 2吗？如果是这样，您应该在数组rules:[]

中设置所有规则

如果是加载器数组，则需要使用use:[]属性将它们链接起来。

所以在你的情况下是这样的：

module: {
  rules: [
    {
      test: /\.js$/, // include .js files
      enforce: 'pre', // preload the jshint loader
      exclude: /node_modules/, // exclude any and all files in the node_modules folder
      use: [ 'jshint-loader' ]
    },
    {
      test: /\.(sass|scss)$/,
      use: [ 'style-loader', 'css-loader', 'sass-loader' ]
    },
  ]
}

您可以在此处找到更多信息： https://webpack.js.org/guides/migrating/#chaining-loaders

希望这有帮助。

Webpack在编译SASS时抛出错误

1 个答案: