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

【问题标题】：Parse Error in css-loader sass-loadercss-loader sass-loader 中的解析错误
【发布时间】：2018-06-09 15:21:37
【问题描述】：

我正在从 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

中的 sn-p

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

【问题讨论】：

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

【解决方案1】：

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

确保按照webpack docs 中的说明安装所需的加载程序。

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

这应该可以解决问题。
如果执行上述操作后仍未修复，请将本地 node_modules 文件夹移动到临时位置，然后运行 npm install。这将重新获得所有模块。

尝试再次运行 webpack，它应该肯定工作。

请告诉我们进展如何。

希望对您有所帮助。

拉克什

【讨论】：

我都试过了。我正在使用 sass-loader。还是行不通。 :(
@ShivamKumar 你能更新 OP 以包括你完整的 webpack.config.js 和 package.json 吗？
@我已经提供了我的仓库的链接 - github.com/shivamkumar110/webpack-3-test
@ShivamKumar webpack被配置为处理src/main/js下的资源。 SCSS 文件不在该文件夹中。因此，sass-loader 对他们不适用。建议编辑 webpack 配置以处理来自 src/main 的资源。
是的，这也是问题所在。我修好了。另一个问题是由于构建失败而导致的 eslint 配置

【解决方案2】：

出现以下错误：执行“ng 服务项目名称”时角度版本 6

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

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

然后，运行以下命令： "npm install sass-loader node-sass css-loader style-loader --save-dev"

【讨论】：