DEV Community

Jastria Rahmat
Jastria Rahmat

Posted on • Updated on

Adding SASS to create-react-app

react & sass, by ijash

Note:

Installation

In new project, install sass.

npm i sass
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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
}


Enter fullscreen mode Exit fullscreen mode

There you have it.

image

Discussion (2)

Collapse
yansusanto profile image
Yan Susanto

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

Collapse
ijash profile image
Jastria Rahmat Author

During the build process, react automatically use saas package.