From 845d618c15d3c50c1924d8e7c5629fdd66a2f552 Mon Sep 17 00:00:00 2001 From: Kelly 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