Webpack - Scss/css Modules Styles Not Being Applied In Prod

I'm using scss modules so I'm using styleName in my react components and everything works in dev. The elements in prod looks like

Solution 1:

For this line of code

test:/\.(sc|sa|c)ss$/,use: [
                    { loader:MiniCssExtractPlugin.loader },
                        {
                        loader:"css-loader",

I'm pretty sure you cant do that because scss and sass need to have sass or scss loader so it cant process sass or scss if you using css-loader

Here is how I config

module: {
        rules: [{
                test:/\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader:"css-loader",
                        options: {
                            minimize:true,
                            sourceMap:true
                        }
                    },
                    {
                        loader:"sass-loader"
                    }
                ]
            }
        ]
    }

You can view my full config here

Share