The React team have listened and, with a few steps, we can now easily setup Sass in our Create React App projects. Let’s get started!

The release of Create React App 2.0 back in October 2018 brought with it a host of new improvements and features. One of these being the addition of Sass support. In other words, we can now easily write Sass instead of plain CSS.

Using Create React App with Sass

If you already know the steps to use Create React App with Sass, but want a reminder of what order to do things in, check the list below.

• Install node-sass
• Rename .css files to be .scss
• Change old import statements to point to the correct file, e.g. ‘./App.css’ to import ‘./App.scss‘

To get started, open a terminal window at the root of your create react app project and install the node-sass library.

We’ll install and save node-sass in our development dependencies because Sass is a development tool. Therefore, we won’t need it once we deploy a React application.

To learn about deploying React apps, check out our guide on deploying React Apps to Heroku.

npm install node-sass --save-dev

After we’ve installed node-sass, rename any and all .css files to have the file type .scss. Then, replace the old .css imports with a .scss so that they’re pointing to the correct file.

// Replace any old .css imports with .scss

// Remove this old import
import './App.css';

// Add this new import
import './App.scss';

Don’t forget to rename any previous .css imports to .scss! If you’re using a fresh Create React App, then the App component is importing ./App.css at the top.

Try It Out

Open up an existing .scss file if you have one, or create a new one (don’t forget to import it in a component!), and add the following code:

.parent {
  width: 300px;
  height: 300px;
  background: red;
  
  .child {
    background: blue;
    width: 100px;
    height: 300px;
  }
  
}

Now add the following HTML to the render method inside the component that you’re importing the style sheet above:

<div className="parent">
  <div className="child"/>
</div>

Wrapping Up

For the longest time, one of the more requested features to have in Create React App has been to add support for Sass. I for one am very happy to see this feature added.

You could manually configure Create React App before, but it took much longer to set up. Adding support for Sass goes to show that the React.js team are focused on continually improving the library.

Once you get the hang of writing Sass, you’ll be so much quicker at styling your applications. It also feels so much more natural and easier to read to nest classes within each other.

👋 Hey, I'm James Dietrich

James Dietrich is an experienced web developer, educator, and founder of Upmostly.com, a platform offering JavaScript-focused web development tutorials. He's passionate about teaching and inspiring developers, with tutorials covering both frontend and backend development. In his free time, James contributes to the open-source community and champions collaboration for the growth of the web development ecosystem.