CSS module not working on react component

Question

I am trying to use css module in my reactjs application. I have added the loader in webpack.config file.

 {
                test: /\.css$/,
                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

            },

But when I import a css file in my application and try to use it for classNames like {styles.example} then it does not link to .example in my css file.

This is how I am doing it:

import styles from './TestPage.css'

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

This is not working.

Components are not styled. I am not getting any error in console though. How can I solve it?

maybe your loader is not appropriate.test after changing your loader — Vikram Saini
– Vikram Saini, Commented Jun 5, 2017 at 12:41
try this { test: /\.css$/, loader: 'style-loader!css-loader'} — Vikram Saini
– Vikram Saini, Commented Jun 5, 2017 at 12:48
This won't activate the module mode of css loader. This is just a css loader. — EdG
– EdG, Commented Jun 5, 2017 at 12:53

Jawla · Accepted Answer · 2019-03-05 09:19:04Z

6

You need to Rename the file

from filename.css to filename.module.css

Usage:

login.module.css

.login {
    background-color: red;
}

Login.js

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

const login = (props) => {
    return (
            <div className={styles.login} >
                Login Card
            </div>
    )

};

answered Mar 5, 2019 at 9:19

Jawla

3332 silver badges12 bronze badges

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

Comments

vimuth · Accepted Answer · 2019-05-02 07:11:33Z

1

Your problem might be because of old react-scripts version.Just update your react-scripts version more than 2.0.3.

npm install --save-dev --save-exact [email protected]

edited May 2, 2019 at 7:11

vimuth

5,87355 gold badges98 silver badges128 bronze badges

answered May 2, 2019 at 6:43

SanPanthera

393 bronze badges

Collectives™ on Stack Overflow

CSS module not working on react component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related