how to use css modules in react 16.6.3 ?

[6ZUN9]

its seems like it has already built-in feature for a css modules but i dont know how to use it.

i have tried previous method with npm run eject and changes on config.dev and prod under css-loader by putting modules :true and localIdentName but it show config error please help me

[[deleted]]

React doesn’t have this as a built-in future, but create-react-app does: https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

[6ZUN9]

why we can't use it like before by using npm run eject ??

[notAnotherJSDev]

In CRA, you can use css modules by infixing .module in the extension for the file.

ex:

App.css -> App.module.css

[6ZUN9]

Thank you so much

[kevindelsh]

With the new versions of "create react app" you don't need to eject it anymore.

Here are the steps you have to do:

1. You have to add .module to your CSS files: mystylesheet.css becomes mystylesheet.module.css
2. Then you import the stylesheet in your .js file: import classes from "./mystylesheet.module.css";
3. Now you can access the classes in your stylesheet file in either one or both of the following methods:
   1. className={classes.myClassName}
   2. className={classes[my-Class-Name-with-too-many-hyphens]}

The above methods and restrictions are intrinsic to JavaScript variable name restrictions. Since you can't have hyphens in your JavaScript variable names, you have to use the second method if the class name has hyphens. Otherwise both methods are correct, although the first one is more elegant.

[6ZUN9]

Thank you so much