css-loader sass-loader中的解析错误

时间:2017-12-29 06:17:31

标签: webpack css-loader sass-loader extract-text-plugin webpack-3

我正在从webpack 1迁移到3.经历了这么多错误后,现在我陷入了困境。有人可以帮助

我收到这些错误 -

ERROR in ./src/main/main.scss
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| body{
|     color: red;
| }
 @ ./src/main/js/App.jsx 13:0-23
 @ ./src/main/js/index.jsx

以下是样本仓库 - https://github.com/shivamkumar110/webpack-3-test

这是我的 webpack.config.js

的摘录
module: {
        rules: [
        {
            test: /\.jsx?$/,
            use: ['eslint-loader'],
            include: SRC,
            enforce: 'pre'
        },  {
            test: /\.jsx?$/,
            use: ['babel-loader'],
            include: SRC
        }, {
            test: /(\.css|\.scss)$/,
            include: SRC,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                        {
                        loader:'css-loader',
                        options: {
                            sourceMap:true
                            }
                        },
                        {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                            }
                        }
                    ]
                })
        },

2 个答案:

答案 0 :(得分:0)

很可能你错过了sass-loader。你能做的是

  1. 确保按照webpack docs

    中的说明安装所需的装载程序

    即运行npm install sass-loader node-sass css-loader style-loader --save-dev

    这应解决问题。

  2. 如果在执行上述操作后未修复,请将本地node_modules文件夹移至临时位置,然后运行npm install。这将新获得所有模块。

    再次尝试运行webpack,肯定工作。

  3. 让我们知道它是怎么回事。

    希望有所帮助。

    勒凯什

答案 1 :(得分:0)

出现以下错误: 执行“ng serve projectname”时 Angular版本6

模块构建失败:错误:sass-loader需要node-sass> = 4。请安装兼容版本。

解决方案: 删除package-lock.json文件,然后运行“npm install”,这应该更新所有依赖项。

然后,运行以下命令: “npm install sass-loader node-sass css-loader style-loader --save-dev”