Adding Sass to create-react-app Applications

Adding Sass to create-react-app is one of the first things most developers do when starting an application.

Writing in plain CSS can be done, but Sass provides much more power with features like:

  • Variables
  • Nesting
  • Math
  • Mixins
  • Functions
  • Imports
  • And More
šŸ˜„Tip
Add Sass to Create React App using a single line: npm install node-sass

For the official docs, check out the Create React App guide.

The steps to add Sass to Create React App are:

  1. Install node-sass: npm install node-sass
  2. Convert your .css files to .scss
  3. Import your .scss files in your React components like App.js
javascript
import './App.scss';

Here's a deeper dive. In order to add Sass to a Create React App application, we need a single command:

bash
# using npm
npm install node-sass --save

# using yarn
yarn add node-sass

Once you have that, we can rename our App.css to App.scss.

Renaming to .scss

In our App.js file, we can import the Sass file using the .scss extension.

javascript
import './App.scss';

Once we restart our yarn start command, we can see that our Sass file is imported!

Most of the time, when we use Sass, we'll be creating a system of files where we separate out things like:

  • variables
  • mixins
  • functions
  • colors

To do this, we'll use @import.

Note: Sass says that @import will be deprecated in the future. They recommend to use @use instead. However, currently @use is not supported in Create React App.

Create a src/_colors.scss file:

New _colors.scss

Now you can import that from your main App.scss file:

scss
// imports are pulled from the src folder
// we don't need to write src or the _ prefix
@import 'colors';
Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)