Using Sass in a React app development

Customizing Create React App : CSS

CSS → Sass

Getting started customizing create-react-app .

Install npm module : node-sass-chokidar

# Current path : ~/create-react-app
npm install node-sass-chokidar --save-dev

Install npm module : npm-run-all

# Current path : ~/create-react-app
npm install npm-run-all --save-dev

Edit package.json : script

# Current path : ~/create-react-app/package.json
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build": "npm run build-css && react-scripts build",
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",

Add custom sass file to the project

/* File path : ~/create-react-app/src/Custom.sass */
body
  background: powderblue

# File path : ~/create-react-app/src/App.js
import './App.css';
+ import './Custom.css'

→ Running npm start compiles .sass files to .css under /src directory.

→ Open http://localhost:3000 to see create-react-app .

Demo : koheishingaiHQ.github.io/create-react-app-with-sass

Comments

[Chuck]

Thank you this answered my question. Planning to test out this week.