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

Question

I've been trying to use sass-loader on webpack v4, but it fails to load scss files in a React component with TypeScript .

Here is a simplified snippet of the code.

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

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

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

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

The error message is ...

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

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.

Answer 1

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

Below is my config

{
                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

I seem to remember having the same issues with webpack. I switched from SASS to Styled Components, it's a css-in-js library. I was wary at first but it's great.

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

It allows you to change CSS styles programmatically using React props. For example if I want to change the opacity of a menu when a button is clicked I can do it like this:

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

That's just one benefit, check the docs to see others. I find using React with styled-components is a great way to work. You have your JS, CSS and HTML all being generated in one place.