Add SASS documentation

Adding SASS (or Less) support in a project bootstrapped using create-react-app, doesn’t require any advanced modifications. It’s seems more intimidating than it actually is. We don’t even have to eject.

First, install preprocessor of your choice. SASS seems the most popular weapon of choice at the moment, so we’ll use it as an example:

npm install node-sass --save-dev

Then in package.json just add the following lines:

"scripts": {
   ...
   "build-css": "node-sass src/sass/base.scss src/index.css",
   "watch-css": "node-sass src/sass/base.scss src/index.css -w",
   ...
}

and run them alongside main scripts, by adding npm run watch-css & to start script and npm run build-css && to build.

  "scripts": {
    "start": "npm run watch-css & react-scripts start",
    "build": "npm run build-css && react-scripts build",
    "build-css": "node-sass src/sass/base.scss src/index.css",
    "watch-css": "node-sass src/sass/base.scss src/index.css -w",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

As far as I’m concerned, that works using Less as well.

Is that something that would belong in current documentation?

[themre]

Any news on this? I found a way to store all scss files in some folder and export them in other:

"build-css": "node-sass src/style/sass/ -o src/style/css/",
 "watch-css": "node-sass -w src/style/sass/ -o src/style/css/",

-w is used for watch, -o is used for output. This will export individual files (scss -> css) into corresponding directory. Would be nice to include this somehow into webpack CSS bundle.

[sudip1072]

Such problem came when you change your node version.Use following command and serve the application on browser. npm rebuild node-sass --force