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 v4上使用 sass-loader ，但是无法加载 scss 文件在带有 TypeScript 的 React 组件中。

I've been trying to use sass-loader on webpack v4, but it fails to load scss files in a React component with 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配置。

The following code is from my webpack config.

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

我关注了<一个href = https://webpack.js.org/concepts/loaders#using-loaders rel = nofollow noreferrer>官方文档示例，但它无法加载 styles.scss 。

I followed the official doc's example, but it fails to load the styles.scss.

以防万一，我重新安装了 s tyle-loader ， css-loader ， sass-loader （和 node-sass ），但无法解决错误。

Just in case, I re-installed style-loader, css-loader, sass-loader (and node-sass), but it didn't solve the error.

错误消息是...

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

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

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

I'm running webpack via Laravel Mix, but don't know if Laravel has anything to do with it.

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

What caused this issue? Any advice will be appreciated.

推荐答案

由于sass-loader和css-loader，您无需将CSS放入测试部分将照顾您，它将您的scss转换为css文件

You dont need to put css in the test section because the sass-loader and css-loader will take care for you and it will transform your scss to css file

以下是我的配置

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

这篇关于webpack：SASS加载程序失败“模块构建失败（来自./node_modules/sass-loader/lib/loader.js）”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！