How to Add Sass to A Create-React-App Project

In this post, we’ll be sharing all the steps you need to follow to learn how to add Sass to a Create-React-App project. We’ll take it step by step and make it crystal clear for you! Let’s do it!

Setup a Create-React-App project

To build your initial project structure, you have two options, either install create-react-app (CRA) package globally and use that, or use npx and avoid installing create-react-app in your system.

To check if you already have CRA installed, type in your terminal:

create-react-app --version

If you see a version logged, something like 5.0.1 then you are just fine and can start the project initialization process. Otherwise, you need to decide whether to proceed by installing CRA or not. Both decisions are valid and it depends on your coding style and whether you like to keep global packages or not.

Installing Create-React-App

If you want to install create-react-app in your terminal type:

npm install create-react-app --global

After installing the package, check its version to verify the installation by typing create-react-app --version.

Now that you have installed CRA you can create your project by typing

create-react-app my-project

Using npx – Avoid installing Create-React-App

If you want to avoid installing create-react-app and just use npx, you can just type

npx create-react-app my-project

Basic difference between npx and npm is that npm is a package manager and npx is a package executor.

Using npx doesn’t install the package you want permanently but rather temporarily so that it gets the job done. That’s why if you check the version of the package used after using npx, you will get nothing back, compared to the classic installation with npm in which you’ll get the installed package’s version. Try it out!

You may ask how npx was added to my system. Since npm version 5.2.0, npx is pre-bundled with npm.

Add Sass to Create-React-App

Now that we have our project’s basic structure, let’s start adding some Sass code. Our first step is installing Sass:

npm install sass

Now that we have the Sass package installed, the next step would be to rename our App.css file to App.scss and add some Sass styling there like so:

body {
  background-color: red;
}

Now I know what you are thinking, and yes, this is not solid styling for our app; it’s just to verify our changes are applied as expected. One final step before verifying everything works. We have renamed our App.css to App.scss so we will be getting an error if we run our app because the importing in the App.js file is using the previous extension import './App.css';.

Let’s change that too by making it import './App.scss';

Now, check out your browser, and you should see the applied changes! Keep in mind, though, that based on your already applied stylings, you may not actually see our styles on the browser because they will probably get overridden by yours. You can still see if everything worked as expected and if our style was “passed” to the browser either by checking your browser’s dev tools or by increasing your style’s specificity.

Sass VS SCSS

For those of you who are paying extra attention, you may have already seen that we have installed a Sass package to handle new code styling, but we have used .scss file extension. What’s with that?

Well, first of all, sass package encompasses both the Sass and SCSS syntax, so we are fine with that regardless of the style we want to use, Sass or SCSS.

The difference between Sass and SCSS is basically their syntax. Sass is more concise and doesn’t use curly braces, whereas SCSS (Sassy CSS) has a more CSS-like syntax.

Both serve the same purpose of allowing maintainability and efficient CSS usage, however .scss extension is more popular in the Sass community, and that’s why we have chosen in this post to use the .scss file extension.

Remove Create-React-App

If, after finishing your project, you’d like to remove CRA from your system, you can just type

npm uninstall --global create-react-app

Remember, if you have used npx for your project’s initialization, nothing was installed, so you’ll be just fine, no reason for uninstalling anything.