css-loader returns undefined on importing css file

Question

I have a css file named App.css which has css like

.abcd {
    margin-top: 50px !important;
    color: red !important;
}

I am importing this and using in my react app like

import styles from './App.css'
console.log("style", styles) // it gives object. 

<div className={"ui equal width grid " + styles.abcd}>
</div>

Here styles.abcd is showing undefined but when I console styles it gives object with that classname on array.. I dont know what is missing here.

My webpack conf looks like:

{
    test: /\.css$/,
    loader: 'css-loader',
    options: {
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]',
    },
},

I have also tried

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
},

Nothing is working. Why is it giving undefined ?

Have you looked in your bundle to see what webpack is producing? — sdgluck
– sdgluck, Commented Dec 11, 2018 at 14:37
you should import your css like this if its a file import styles from './App.css' — Inderjeet Singh
– Inderjeet Singh, Commented Dec 11, 2018 at 15:54
what if <div className={"ui equal width grid abcd"}> </div> ? — reisdev
– reisdev, Commented Dec 11, 2018 at 16:22
@sdgluck I get an object with class name when I console my styles variable. but when I try to use its attribute styles.abcd , its giving me undefined — varad
– varad, Commented Dec 11, 2018 at 16:33

preumich · Accepted Answer · 2020-04-21 16:39:28Z

0

Similar problem answered here: CSS Modules class names undefined

In the docs, it's mentioned that you have to name the file as follow :

[name].module.css

Try renaming the file to : Catalog.module.css and import it like this :

import styles from './Catalog.module.css';

In your case you should name it App.module.css and import as such.

answered Apr 21, 2020 at 16:39

preumich

91 bronze badge

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

1 Comment

taoliujun May 9 at 3:50

[name].module.css is just one way to implement modules, such as test: /module.css$/i. However, the question has already forcibly enabled modules for the .css file.

Smit Sharma · Accepted Answer · 2022-08-16 13:30:12Z

-1

Your code is :

import styles from './App.css'
console.log("style", styles) // it gives object. 

<div className={"ui equal width grid " + styles.abcd}>
</div>

Here it should have been :

<div className={`ui equal width grid ${styles.abcd}`}>

answered Aug 16, 2022 at 13:30

Smit Sharma

1

1 Comment

Nate-Wilkins Over a year ago

Both represent the same string in a different format.

Collectives™ on Stack Overflow

css-loader returns undefined on importing css file

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related