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

Top comments (2)

Collapse
 
yansusanto profile image
Yan Susanto

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

Collapse
 
ijash profile image
Jastria Rahmat

During the build process, react automatically use saas package.

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈