From 845d618c15d3c50c1924d8e7c5629fdd66a2f552 Mon Sep 17 00:00:00 2001
From: Kelly <kelly.milligan@gmail.com>
Date: Thu, 11 May 2017 23:00:45 -0500
Subject: [PATCH] Update Sass docs (#2114)

* update readme with fix from https://github.com/facebookincubator/create-react-app/issues/1939

* update with better globbing

* added note

* updating with a note and reverting previous changes

* how about this?

* refactor

* added note about new files back in after verifying locally

* spaces back in, sorry was my editor!

* removed note about new files :)

* added bullet about new files issue currently open on node-sass
---
 template/README.md | 35 +++++++++++++----------------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/template/README.md b/template/README.md
index 1c781cbe975..bb340a75928 100644
--- a/template/README.md
+++ b/template/README.md
@@ -398,15 +398,14 @@ Following this rule often makes CSS preprocessors less useful, as features like
 First, let’s install the command-line interface for Sass:
 
 ```
-npm install node-sass --save-dev
+npm install node-sass-chokidar --save-dev
 ```
-
 Then in `package.json`, add the following lines to `scripts`:
 
 ```diff
    "scripts": {
-+    "build-css": "node-sass src/ -o src/",
-+    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
++    "build-css": "node-sass-chokidar src/ -o src/",
++    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
@@ -430,8 +429,8 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
 
 ```diff
    "scripts": {
-     "build-css": "node-sass src/ -o src/",
-     "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
+     "build-css": "node-sass-chokidar src/ -o src/",
+     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
 -    "start": "react-scripts start",
 -    "build": "react-scripts build",
 +    "start-js": "react-scripts start",
@@ -442,27 +441,19 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
    }
 ```
 
-Now running `npm start` and `npm run build` also builds Sass files. Note that `node-sass` seems to have an [issue recognizing newly created files on some systems](https://github.com/sass/node-sass/issues/1891) so you might need to restart the watcher when you create a file until it’s resolved.
+Now running `npm start` and `npm run build` also builds Sass files. 
 
-**Performance Note**
+**Why `node-sass-chokidar`?**
 
-`node-sass --watch` has been reported to have *performance issues* in certain conditions when used in a virtual machine or with docker. If you are experiencing high CPU usage with node-sass you can alternatively try [node-sass-chokidar](https://www.npmjs.com/package/node-sass-chokidar) which uses a different file-watcher. Usage remains the same, simply replace `node-sass` with `node-sass-chokidar`:
+`node-sass` has been reported as having the following issues:
 
-```
-npm uninstall node-sass --save-dev
-npm install node-sass-chokidar --save-dev
-```
+- `node-sass --watch` has been reported to have *performance issues* in certain conditions when used in a virtual machine or with docker.
 
-And in your scripts:
+- Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939)
 
-```diff
-   "scripts": {
--    "build-css": "node-sass src/ -o src/",
--    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive"
-+    "build-css": "node-sass-chokidar src/ -o src/",
-+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
-   }
-```
+- `node-sass` has been reported as having issues with detecting new files in a directory [#1891](https://github.com/sass/node-sass/issues/1891)
+
+ `node-sass-chokidar` is used here as it addresses these issues.
 
 ## Adding Images, Fonts, and Files