CODEWITHSUNDEEP
javascriptreactjswebpacksass
Myzel394
Myzel394

Reputation: 1317

React - Importing non-modular sass file returns empty object

I'm trying to import some variables from scss files. One is a module (*.module.scss), one is not. When importing the module one, I get the variables in an object. When importing the other one, I get an empty object. The two scss files are identical.

Here's my scss file:

:export {
    a: red;
}

my index.tsx:

import styles from "./styles/test.module.scss";
import nonModularStyles from "./styles/test.scss";

console.log(styles); // {a: "red"}
console.log(nonModularStyles);  // {}

Here are the rules from my webpack.config.js:

{
    test: /\.module\.s[ac]ss$/,
    loader: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                modules: true,
                sourceMap: true,
            },
        },
        {
            loader: "sass-loader",
            options: {
                sourceMap: true,
            },
        },
    ],
},
{
    test: /\.s([ac])ss$/,
    exclude: /\.module.(s(a|c)ss)$/,
    loader: ["style-loader", "css-loader", "sass-loader"],
},

I installed style-loader, sass-loader, css-loader, `sass-m

Strangely, this exact same setup works in another project fine.

Upvotes: 6

Views: 1631

Answers (1)

Manu
Manu

Reputation: 193

I had the same problem, removing style-loader from webpack.config.json fixed the issue.

Upvotes: 3

Related Questions