In order to use CSS Modules in your Javascript project you usually need to do some configuring. Luckily this is not the case when you are using create-react-app. CSS Modules are supported with create-react-app out of the box. There is however a catch that you need to know in order to get your CSS Modules working in your create-react-app project.
Read also 6 Things Every Beginner React Developer Should Know
Watch through tutorial on YouTube.
If you want create-react-app to treat a CSS file as CSS Module file, you need to use a specific naming convention when naming your CSS file. You need to name your CSS files with .module.css extension. This way create-react-app knows that the file should be treated as CSS Module. After this you can import the CSS file normally and use the class names from it to style your components.
This post is a short one because I just wanted to write a quick post about this since I was fighting with this a while back. It took me way too long to find the solution for this and hopefully this post helped you to solve the problem with CSS Modules and CRA faster than it took me.
If you would like a more through explanation, I made a video about this to my YouTube channel, so be sure to check that out.
Originally published at codepulse.blog on October 23, 2019.
Top comments (0)