web developer | musician | venue booker

A Few Brief Words About CSS Modules and Create-React-App v2

I’m a huge fan of Create-React-App. I pretty much use it for every React project I make. I’m also a big fan of CSS modules. For those who don’t know, CSS Modules allow you to scope a CSS file to a javascript file, so you don’t need to worry about duplicate class names or anything like that. It also helps to keep your CSS leaner and smaller, because you’ll be writing many CSS files. One per file, really!

In previous versions of Create-React-App, you had to run “npm eject” in order to enable CSS modules. That can pose a bit of a problem, and the developers only recommend doing that if you really need to. From there you had to go into some settings files and alter all sorts of code, which was not fun either! I kept a pretty long checklist reminding me how to do the step-by-step process, and I always managed to mess a thing or two up every time.

But now, with the release of Create-React-App v2, CSS modules are now fully supported without having to run npm eject. All you need to do now is name your css file “your-file.module.css”. That’s it! Doesn’t get much easier than that. Good times!