CODEWITHSUNDEEP
reactjscss-modulescss-loaderreact-css-modules
EdG
EdG

Reputation: 2351

CSS module not working on react component

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?

Upvotes: 0

Views: 5571

Answers (2)

SanPanthera
SanPanthera

Reputation: 39

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]

Upvotes: 1

Jawla
Jawla

Reputation: 333

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>
    )

};

Upvotes: 6

Related Questions