webpack：SASS 加载器失败“模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）”答案

【问题标题】：webpack: SASS loader fails "Module build failed (from ./node_modules/sass-loader/lib/loader.js)"webpack：SASS 加载器失败“模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）”
【发布时间】：2019-10-24 04:27:24
【问题描述】：

我一直在尝试在 webpack v4 上使用sass-loader，但它无法在带有TypeScript 的React 组件中加载scss 文件。

这是一个简化的sn-p代码。

//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(),
]

我关注了the official doc's example，但无法加载styles.scss。

以防万一，我重新安装了style-loader、css-loader、sass-loader（和node-sass），但并没有解决错误。

错误信息是...

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

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

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

【问题讨论】：

标签： reactjs laravel webpack ecmascript-6 sass

【解决方案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"
                    }
                ]

【讨论】：

感谢您的建议，但不幸的是它没有解决错误:(
你能把你的代码上传到某个地方让我看看
我只需要从您的建议中删除style-loader！
那一行应该写在哪里？我正在使用 laravel-mix
添加到你的 webpack 配置中

【解决方案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 都在一个地方生成。

【讨论】：