Add SASS support documentation #1007

packages/react-scripts/template/README.md

@@ -18,6 +18,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Importing a Component](#importing-a-component)
 - [Adding a Stylesheet](#adding-a-stylesheet)
 - [Post-Processing CSS](#post-processing-css)
+- [Adding CSS Preprocessor (Sass, Less etc.)](#adding-css-preprocessor-sass-less-etc)
 - [Adding Images and Fonts](#adding-images-and-fonts)
 - [Using the `public` Folder](#using-the-public-folder)
 - [Adding Bootstrap](#adding-bootstrap)
@@ -301,6 +302,47 @@ becomes this:
 
 There is currently no support for preprocessors such as Less, or for sharing variables across CSS files.
 
+## Adding CSS Preprocessor (Sass, Less etc.)
+
+Using a CSS preprocesssor in a project bootstrapped using create-react-app, is fairly straightforward to setup, even without having to eject.
+
+First, install preprocessor of your choice. We will be using SASS in this example, but you can replace SASS with a preprocessor of your choice.
+
+```
+npm install node-sass --save-dev
+```
+
+Then in `package.json` just add the following lines to `scripts`, replacing file paths accordingly.
+```
+  ...
+  "scripts": {
+    ...
+    "build-css": "node-sass src/sass/base.scss src/index.css",
+    "watch-css": "npm run build-css && node-sass src/sass/base.scss src/index.css -w",
+    ...
+  }
+  ...
+```
+
+> To use a different preprocessor, replace `build-css` and `watch-css` scripts to match the one you're using.
+
+Add these scripts to the main scripts, by pasting `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": "npm run build-css && node-sass src/sass/base.scss src/index.css -w",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+  ...
+```
+
+Finally, you can use `npm start` or `npm run build` as usual.
+
 ## Adding Images and Fonts
 
 With Webpack, using static assets like images and fonts works similarly to CSS.