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

Latest comments (3)

Collapse
 
dance2die profile image
Sung M. Kim

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

Collapse
 
anujyadav851 profile image
ANUJ YADAV

Good, nice explanation bro..

Collapse
 
mehtakash0123 profile image
Kashish Mehta

Nice