webpack: SASS loader fails "Module build failed (from ./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"
                    }
                ]