Adding SASS to create-react-app

Note:

• Package node-sass are deprecated. See node-sass npm page and sass blog
• as per this post date, I use react version ^17.0.2.

Installation

In new project, install sass.

npm i sass

Importing SASS

1. Rename App.css to App.scss. Also index.css to index.scss.

2. In App.js and index.js fix the import from css to scss. It will result:
   

import "./index.scss";

Using SASS

1. You can edit the scss either in App.scss or index.scss

for example, clear all code in app.scss, then add the following:

$mainColor: #525763; // assigning the variable

body {
  background-color: $mainColor; // consuming the variable
}

There you have it.

Comments

[Yan Susanto]

Just curious, how do you compile the App.scss ---> App.css?

[Ijash]

During the build process, react automatically use saas package.