webpack: SASS加载器失败 "来自./node_modules/sass-loader/lib/loader.js的模块构建失败"

Question

我一直在尝试在Webpack v4上使用sass-loader，但它无法加载TypeScript中React组件中的scss文件。这里是代码的简化片段。

//index.tsx

import * as React from 'react';
import './styles.scss';

const Navigation = () => {
    return (<div className="app-bar"></div>)
}


//styles.scss
.app-bar { 
    background-color: #2196f3;
}

下面的代码是我 webpack 配置文件中的内容。

module: {
    rules: [
    //loaders for jsx, tsx etc
    {
        test: /\.(css|scss)$/,
        use: [
            { loader: 'style-loader' },
            {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            },
            { loader: 'sass-loader' }
        ]
    }]
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),
    new CleanWebpackPlugin(),
]

我跟随官方文档的示例，但它无法加���styles.scss文件。

为了确保，我重新安装了style-loader，css-loader，sass-loader（和node-sass），但这并没有解决错误。

错误信息是...

模块构建失败（来自./node_modules/sass-loader/lib/loader.js）：

我通过Laravel Mix运行webpack，但不知道Laravel是否与此有关。

是什么导致了这个问题？任何建议将不胜感激。

- Hiroki

Answer 1

您不需要在测试部分放置CSS，因为sass-loader和css-loader将为您处理它，并将转换您的SCSS文件为CSS文件

以下是我的配置

{
                test: /\.scss$/,
                use: [
                    //'style-loader' was the culprit, so I just needed to remove it
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]

- Tony Ngo

---

谢谢您的建议，但不幸的是它没有解决错误 :( - Hiroki

你能把你的代码上传到某个地方，这样我就可以看一下吗？ - Tony Ngo

我只需要从你的建议中移除 style-loader！ - Hiroki

那行代码应该写在哪里？我正在使用 Laravel Mix。 - Eleazar Ortega

将其添加到您的webpack配置中。 - Tony Ngo

Answer 2

我记得在使用webpack时也遇到了同样的问题。我从SASS转换到了Styled Components，这是一个css-in-js库。一开始我有些犹豫，但它真的很棒。

https://www.styled-components.com/

它允许您使用React属性以编程方式更改CSS样式。例如，如果我想在单击按钮时更改菜单的不透明度，可以像这样执行：

opacity: ${props => (props.menuOpen ? 1 : 0)};

这只是其中一个好处，查看文档以了解其他。我发现使用React和styled-components一起工作是一个很好的方法。您可以在一个地方生成JS、CSS和HTML。

- Pixelomo