How to Configure React with SASS/SCSS (create-react-app)

Olurin Oreofe
Feb 16, 2018 · 3 min read

NOTE: For latest version of create-react-app (since react-scripts@2.0.0) all you need to do is install node-sass and import a file with the extension .scss or .sass. This article is for the versions prior to react-scripts@2.0.0

Often times when I try to bootstrap my react apps using the create-react-app npm package, I usually find myself spending few minutes googling how to to configure sweet SCSS to my project. So in-order to save me precious time, I have decided to pen it down as a reference. Hopefully I wont forget the URL.

Step 0: Install Starter App

Lets start by installing the starter app.

You can do that by running npm i -g create-react-app globally or using npx create-react-app to install and invoke it immediately so your installed package won’t be anywhere in your globals. Check out more about npx.

Step 1: Eject The Build Scripts

You might notice that the starter app comes with zero build configuration file. You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

In order to access the config files, we would runnpm run eject to eject the build scripts from starter app. You'll be asked for approval because the action is permanent. Once this command has successfully run, you should see a config and scripts folder created. They contain all the build scripts necessary for building the started app. Among them is the webpack.config.dev.js and webpack.config.prod.js files, which is our focus.

Also note that npm run eject updates your dependencies with other packages which it has previously abstracted from you. You can view those new dependencies in your package.json.

Step 2: Install & Configure Sass Loader

First run npm i sass-loader node-sass — save to install sass-loader to help in compiling your scss to css.

Next, edit the webpack.config.dev.js in the config folder as follows. Add the loaders to configure the webpack, to compile our scss files.

Also add /\.scss$/, to the exclude array just at the bottom of the loaders.

You can find the full source of the webpack.config.dev.js file here.

That’s it. We are done. We can test the configuration by changing our index.css file to index.scss file and trying out some cool Sass features.

Move to your shinny newindex.scss file and edit as follows. Also don’t forget to change the import signature in index.js file to import "./index.scss";

Hopefully we should have something like this after running npm start.

You can check this gist as reference for the full webpack configuration. Also don’t forget to replicate the same in webpack.config.prod.js for production builds.

Bonus: CSS modules

To take full advantage of webpack for your react development, consider using CSS modules! Here is an article detailing what they are and why you need them.

Great! You now have scss configured and I now have my permanent reference. Cheers!

Olurin Oreofe

Written by

Fullstack Engineer @ScalioLabs. NodeJS, Angular, NestJS, Go. Love keyboard and coffee. @oreofeolurin