Adding SASS to create-react-app

 

Installation

In new project, install sass. https://www.npmjs.com/package/sass#usage

    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";

Sass Extensions for VS Code

• https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented
  
• https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

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

    }