DEV Community

Anuj Singh
Anuj Singh

Posted on

Using CSS Module in Latest React 16.12.0

[It's my first post, so please ignore any grammatical mistake]

In the newer version of reactJS [as per given date 10-FEB-2020 it's 16.12.0], the older way of using npm run eject will not work.

So, to make it work what we can do is ---

Step 1 Making CSS file
While making a CSS file, name it in following convention.
e.g name i want is "index", so instead of naming it "index.css", name it to "index.module.css"
And write css code as usual you are writing earlier.

Step 2 Importing CSS file
While importing the "index.module.css" file in another file, eg in App.js, use following command;

import style from './index.module.css';

style name is upto you, this is used for refering the classes and id inside of css file

for using CSS codes use className={style.Col}
Col is the css code inside index.module.css

Top comments (3)

Collapse
 
anujyadav851 profile image
ANUJ YADAV

Good, nice explanation bro..

Collapse
 
mehtakash0123 profile image
Kashish Mehta

Nice

Collapse
 
dance2die profile image
Sung M. Kim

Welcome to DEV, Anuj and thank you for the post~