Question

我一直试图在webpack v4上使用sass-loader，但是它无法通过scss将React文件加载到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;
}

以下代码来自我的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是否与此有关。

是什么原因导致此问题？任何建议将不胜感激。

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

Answer 2

我似乎还记得webpack遇到同样的问题。我从SASS切换到样式化组件，这是一个css-in-js库。刚开始我很警惕，但这很棒。

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

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

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

那只是一项好处，请查看文档以查看其他内容。我发现将React与样式化组件一起使用是一种很好的工作方式。您可以在一处生成JS，CSS和HTML。

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

2 个答案: