DEV Community

loading...

Adding SASS to create-react-app

Jastria Rahmat
Well, here I am. What are your other two wishes?
Updated on ・1 min read

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 (0)