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:

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.

"that I declare in :export block" - Can you clarify what you mean? Can you share the exact syntax of your importing and exporting? — Slbox
– Slbox, Commented Mar 9, 2021 at 19:22

Ruben Santana · Accepted Answer · 2021-03-12 05:17:20Z

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>

answered Mar 12, 2021 at 5:17

Ruben Santana

6597 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

webpack: Imported style is an empty object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related