reactjs - webpack:SASS 加载器失败 "Module build failed (from ./node_modules/sass-loader/lib/loader.js)"

Question

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

这是一段简化的代码。

//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;
}

以下代码来 self 的 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)，但并没有解决错误。

错误信息是...

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

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

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

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"
                    }
                ]