NOTE: For latest version of
firstname.lastname@example.org) all you need to do is install
node-sassand import a file with the extension
.sass. This article is for the versions prior to
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 run
npm 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
scripts folder created. They contain all the build scripts necessary for building the started app. Among them is the
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
Step 2: Install & Configure Sass Loader
npm i sass-loader node-sass — save to install
sass-loader to help in compiling your
Next, edit the
webpack.config.dev.js in the
config folder as follows. Add the loaders to configure the
webpack, to compile our
/\.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 new
index.scss file and edit as follows. Also don’t forget to change the import signature in
index.js file to
Hopefully we should have something like this after running
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
Great! You now have
scss configured and I now have my permanent reference. Cheers!