Skip to content

Commit a1b56cf

Browse files
michaelwaymanTimer
authored andcommitted
Update README.md CSS Preprocessor --> node-sass-chokidar alternative (#1987)
* resolves #1986 updates CSS Preprocessor docs to include information on node-sass-chokidar alternative to node-sass * Update README.md
1 parent a53f22b commit a1b56cf

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

packages/react-scripts/template/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,26 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
468468

469469
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.
470470

471+
**Performance Note**
472+
473+
`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`:
474+
475+
```
476+
npm uninstall node-sass --save-dev
477+
npm install node-sass-chokidar --save-dev
478+
```
479+
480+
And in your scripts:
481+
482+
```diff
483+
"scripts": {
484+
- "build-css": "node-sass src/ -o src/",
485+
- "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive"
486+
+ "build-css": "node-sass-chokidar src/ -o src/",
487+
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
488+
}
489+
```
490+
471491
## Adding Images, Fonts, and Files
472492

473493
With Webpack, using static assets like images and fonts works similarly to CSS.

0 commit comments

Comments
 (0)