How to use css modules with create-react-app?

Question

According to a tweet by Dan Abramov, CSS modules support is there in create-react-app (CRA). One just needs to give extension of module.css to his stylesheets t

Answer 1

Heading ##i use react-script version 3.4.3 (latest version). you simply follow the below given steps.

run the command :npm run eject

Then you will get a config file , in that open webpack.config.js

And search test: cssRegex or just search cssRegex now you will see something like this:

test: cssRegex,

          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          }),

now after importLoaders:1, add modules:true, and just save the file.

Now you can restart the server using npm start and you will see your styles applied.

Open .js file and import statement like this

import cssStyleClassName from './MyAppStyle.css';

please do not forget to add .css extension to the styling file, at the time of import.

Then this import statement allow you to do following changes in component tags like this

styleName is what you defined in your MyAppStyle.css file

.styleName{
your properties here...
}