Add Sass to your React App in 2021! Here is how.

Hi 👋🏼 my name is Austin. I am a Full Stack Developer and I enjoy adding Sass to my React applications.

There are a number of benefits to using Sass over vanilla CSS. In this series I will be introducing you to all the ways, Syntactically Awesome Style Sheets, aka “Sass” is better.

But first, in this post, we will get Sass set up in your React app.

If you are reading this, I am assuming you are using create-react-app, you have node installed, you use npm or yarn and you have a basic understanding of your package.json / installing dependencies.

Lets make a brand new React App called sass-blog. (Skip this step if you are adding Sass to an existing React App!)

npx create-react-app sass-blog

Next lets install sass and save it to our devDependencies.

npm install --save-dev sass

This installs the latest version of Sass ( Dart Sass ) and provides us with access to the executable as well as the library. Now we will see “sass” version “^1.32.8” in our package.json file under our devDependencies.

Next we should make some folders to stay organized. In your src folder, add a a Sass folder and a Css folder. In our Sass folder, add an App.scss file. This is where we will import all of our other .scss files.

Next in App.js, import ‘./Sass/App.scss’ in place of ‘./App.css’.

Almost all set up! Lets head to our package.json file where we are going to add a script that will tell our app to compile our Sass folder to our Css folder.

Add the following script to your package.json under “scripts”

"sass" : "sass src/Sass:src/Css --watch --no-source-map"

This is going to allow us to run the command “npm run sass”. It will “watch” all our our Sass files for changes and compile them to our Css folder real time! The “no source map” flag, keeps us from generating the file that shows how the files are mapped together (less clutter).

Finally open up your terminal. You will need two tabs, in one run “npm start” and the other run “npm run sass”.

Congratulations you have the power of Sass set up and you are ready to style your React App!

I hope this helped. If you have a better way to do what we just did, let me know in the comments below. In the upcoming series we will be looking at the different features of Sass and what makes it so awesome! Have a great day and happy coding!