webpack: Imported style is an empty object

Question

This is my webpack configuration but I am trying to import scss styles that I declared in :export block but I get an empty JSON.

Unsurprisingly, there are other people having the same issue:

1. https://github.com/webpack-contrib/sass-loader/issues/206

2. css modules object import returns empty

config.webpack.js

{
    test: /\.(css|scss|sass)$/,
    exclude: /node_modules/,
    use: [
        'style-loader',
        {
            loader: MiniCssExtractPlugin.loader,
        },
        'css-loader',
        'resolve-url-loader',
        'sass-loader',
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: [require('autoprefixer')()],
            },
        },
    ],
}

I appreciate any help or hint.

Answer 1

Try putting .module. into your scss file name.

E.g.: filename.module.scss

then in your code:

import styles from "./filename.module.scss";

And you can use the classes of your scss:

<div className={styles.yourClassStyle}></div>