react sass

1// step 1: install node-sass
2// using npm
3npm install node-sass --save
4// using yarn
5yarn add node-sass
6
7// step 2: Convert your .css files to .scss
8
9// step 3: add in your app.js
10import './App.scss';

1npm install node-sass --save

1npm install node-sass --save-dev

1yarn add node-sass@4.14.1

1#### Using sass in react without ejecting
2#1.First install node-sass
3npm i --save-dev node-sass
4
5#2.Then install npm-run-all
6npm install --save npm-run-all
7
8#Then change the scripts of package.json:
9
10#  "scripts": {
11#    "build-css": "node-sass src -o src",
12#    "watch-css": "npm run build-css && node-sass src -o src --watch --recursive",
13#    "start-js": "react-scripts start",
14#    "start": "npm-run-all -p watch-css start-js",
15#    "build": "npm run build-css && react-scripts build",
16#    "test": "react-scripts test --env=jsdom",
17#    "eject": "react-scripts eject"
18#  }
19
20#After that, create a scss file beside each css file with the same name
21#then run:
22npm start
23
24#after that every time you change the scss files, css files also ill be updated.
25# !!! no need to change the imports of css files

1$myColor: red;
2
3h1 {
4  color: $myColor;
5}