CSS Modules & Sass in Create React App

Kirsten Swanson
Jul 31, 2017 · 5 min read

Whenever I can I’ll integrate Sass into projects, so this time I was determined to configure Sass AND CSS modules into my create-react-app project. Let’s start from the very beginning with creating a new project.

npm i -g create-react-app

create-react-app project-name

cd project-name

Now when you npm start or yarn start your project is all configured and ready to go…except there’s no Sass out of the box. Everything came neatly bundled together, but now we’re going to have to eject in order to change the Webpack configuration. Word of caution, once you eject you can never go back!

npm run eject or yarn eject

Now you have a config folder at your disposal. This makes you have full control over your project since you can access all of your packages, scripts and configurations. Navigate to your package.json file and look how many dependencies you have! We’re going to be adding some more to support the preprocessing of Sass (.scss files).

npm i sass-loader node-sass --save or yarn add sass-loader node-sass

Once you have installed these packages navigate to the
webpack.config.dev.js file within the config folder. Here we’re going to add another loader, so our .scss files can process.

At the bottom of the loaders right after you have inserted the loaders for Sass you’ll see this warning:

Just add /\.scss$/, to the ‘exclude’ list since it needs to be updated whenever there’s a change to loader extensions.

Now let’s make sure that we’re all configured correctly by testing out some Sass! I always use the color red, since you know right away whether your CSS is hooked up correctly or not. What better way to use this color than with the Sass lighten function.

Let’s go ahead and change the index.css file to index.scss. In the index.js file we will now import our styles by import './index.scss'.
I just used the lighten function on the background of the body.

Now if everything was set-up correctly you will have this beautiful red screen in front of you! Success, now we’re going to add the capability of CSS modules!

Let’s make modular components with CSS modules! First let’s do a little rearranging of our file structure, so that we put our App component in isolation. This way we can really start to feel some modularity.

Now let’s go back to the webpack.config.dev.js file because we need to update our loaders again.

First let’s import the extract-text-webpack-plugin at the top of the file with the rest of the variables. This dependency was already bundled with the create-react-app, so you don’t need to worry about installing it. This extract text plugin moves all your CSS modules into a separate CSS file that is bundled at the same time as the JS bundle.

const ExtractTextPlugin = require('extract-text-webpack-plugin');

Next we will modify the CSS and SCSS loaders again.

Finally, we will need to add the extractTextPlugin to the plugins array at the bottom of the file.

Also I had received an error “Cannot resolve module ‘style’” and I was able to resolve this error by making a postcss.config.js file at the root of my project directory. Check here for more info about that config file set-up.

At this point everything should be wired-up correctly, so let’s test it out! If you refresh your browser now you’ll actually see that all your styles are broken. Don’t gasp, that’s actually a good thing since it means we can now import our styles.

In your App component let’s import our styles and console.log them.

import styles from './App.scss';

In your console you should be able to see your style classes.

Notice how the classes are snake case, let’s change these to camel case. Actually let’s just remove the “App” prefixes to the styles since we’re keeping our component modular and the styles will be scoped to that specific component.

In order to use these classes we need to change the classNames to the JS object literals, like so className={styles.app}.

Ok now the moment of truth…I tweaked the styling and content a little bit, but if everything went smoothly you should have something like this:

Woohoo, you’re now able to use Sass and CSS Modules in your project! 💃🏻 Don’t forget you’ll also have to update your webpack-config-prod.js file in order to build and deploy your project.

Here is the code for more reference.

Kirsten Swanson

Written by

A creative, adventurous, and curious Front-End Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade