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, Jun 05 '17 at 12:41
try this { test: /\.css$/, loader: 'style-loader!css-loader'} — Vikram Saini, Jun 05 '17 at 12:48
This won't activate the module mode of css loader. This is just a css loader. — EdG, Jun 05 '17 at 12:53
This is just a css loader, you can not do styles.example. This will just import your stylesheet and make it usable for the app. — VivekN, Jun 05 '17 at 14:13
@ApurvG what is your end goal here? Do you just want to apply styles to your app or do you specifically want to use styles.example only? — VivekN, Jun 05 '17 at 14:21
@user3408151 I have a css file. I want this css file to be used for one specific component. So I was trying to make a local css file for this component. That was my end goal. And I can do it with css modules. right? — EdG, Jun 05 '17 at 14:26
If your TestPage.css just contains the css for one component, then importing it in that component like you did should style your div. Just give your div the correct className — VivekN, Jun 05 '17 at 14:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145890/discussion-between-apurvg-and-user3408151). — EdG, Jun 05 '17 at 14:32

score 6 · Answer 1 · answered Mar 05 '19 at 09:19

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

};

score 1 · Answer 2 · edited May 02 '19 at 07:11

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 react-scripts@2.0.3

edited May 02 '19 at 07:11

vimuth

5,064
33
79
116

answered May 02 '19 at 06:43

SanPanthera

39
3

CSS module not working on react component

2 Answers2