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
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
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:
/\.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
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
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
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.