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
Rename
App.css
toApp.scss
. Alsoindex.css
toindex.scss
.In
App.js
andindex.js
fix the import from css to scss. It will result:
import "./index.scss";
Using SASS
- You can edit the scss either in
App.scss
orindex.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.
Top comments (2)
Just curious, how do you compile the App.scss ---> App.css?
During the build process, react automatically use
saas
package.