How to use CSS Modules with Create React App

June 12, 2018

Using CSS Modules with Create React App is finally possible if you use the Create React App alpha. According to Dan Abramov’s roadmap, you can either 1 upgrade an existing app, or 2 create a brand new application.

To upgrade an existing application to create-react-app’s alpha, use

yarn upgrade react-scripts@2.0.0-next.66cc7a90

Or to create a new application, use

npx create-react-app@next --scripts-version=2.0.0-next.66cc7a90

Next, you’ll need to rename your stylesheets to *.module.css because create-react-app’s CSS Modules has opt-in support. I recommend structuring your components like this:

            components/
├── Button/
│     ├── Button.jsx
│     └── Button.module.css
└── Input/
      ├── Input.jsx
      └── Input.module.css

          

If you’re new to structuring your application in this fashion, check out my source code for Cryptomarkets. And for a simple overview of how CSS Modules works within React, check out my post here.