Using CSS Module in Latest React 16.12.0

singhanuj620

Anuj Singh

Posted on February 10, 2020

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

πŸ’– πŸ’ͺ πŸ™… 🚩
singhanuj620
Anuj Singh

Posted on February 10, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related