From a514703e4854a93d0bb0e235d914335817d41295 Mon Sep 17 00:00:00 2001 From: Michael Wayman Date: Sun, 16 Apr 2017 23:05:01 -0400 Subject: [PATCH 1/2] resolves facebookincubator/create-react-app#1986 updates CSS Preprocessor docs to include information on node-sass-chokidar alternative to node-sass --- packages/react-scripts/template/README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index d1c5e0c6e52..e7cc4ee640f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -468,6 +468,26 @@ 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. +**Performance Note** + +`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: + +``` +npm uninstall node-sass --save-dev +npm install node-sass-chokidar --save-dev +``` + +And in your 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" + } +``` + ## Adding Images, Fonts, and Files With Webpack, using static assets like images and fonts works similarly to CSS. From 37c08f7415dfce91d821a2a812281eadb797a4c8 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 22 Apr 2017 15:33:17 -0400 Subject: [PATCH 2/2] Update README.md --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index e7cc4ee640f..de2ec690a97 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -470,7 +470,7 @@ Now running `npm start` and `npm run build` also builds Sass files. Note that `n **Performance Note** -`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 --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`: ``` npm uninstall node-sass --save-dev