Skip to content

Commit 2de95c4

Browse files
kellyrmilliganTimer
authored andcommitted
Update Sass docs (#2114)
* update readme with fix from #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
1 parent 2b59654 commit 2de95c4

File tree

1 file changed

+13
-22
lines changed

1 file changed

+13
-22
lines changed

packages/react-scripts/template/README.md

+13-22
Original file line numberDiff line numberDiff line change
@@ -398,15 +398,14 @@ Following this rule often makes CSS preprocessors less useful, as features like
398398
First, let’s install the command-line interface for Sass:
399399

400400
```
401-
npm install node-sass --save-dev
401+
npm install node-sass-chokidar --save-dev
402402
```
403-
404403
Then in `package.json`, add the following lines to `scripts`:
405404

406405
```diff
407406
"scripts": {
408-
+ "build-css": "node-sass src/ -o src/",
409-
+ "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
407+
+ "build-css": "node-sass-chokidar src/ -o src/",
408+
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
410409
"start": "react-scripts start",
411410
"build": "react-scripts build",
412411
"test": "react-scripts test --env=jsdom",
@@ -430,8 +429,8 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
430429

431430
```diff
432431
"scripts": {
433-
"build-css": "node-sass src/ -o src/",
434-
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
432+
"build-css": "node-sass-chokidar src/ -o src/",
433+
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
435434
- "start": "react-scripts start",
436435
- "build": "react-scripts build",
437436
+ "start-js": "react-scripts start",
@@ -442,27 +441,19 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
442441
}
443442
```
444443

445-
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.
444+
Now running `npm start` and `npm run build` also builds Sass files.
446445

447-
**Performance Note**
446+
**Why `node-sass-chokidar`?**
448447

449-
`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`:
448+
`node-sass` has been reported as having the following issues:
450449

451-
```
452-
npm uninstall node-sass --save-dev
453-
npm install node-sass-chokidar --save-dev
454-
```
450+
- `node-sass --watch` has been reported to have *performance issues* in certain conditions when used in a virtual machine or with docker.
455451

456-
And in your scripts:
452+
- Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939)
457453

458-
```diff
459-
"scripts": {
460-
- "build-css": "node-sass src/ -o src/",
461-
- "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive"
462-
+ "build-css": "node-sass-chokidar src/ -o src/",
463-
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
464-
}
465-
```
454+
- `node-sass` has been reported as having issues with detecting new files in a directory [#1891](https://github.com/sass/node-sass/issues/1891)
455+
456+
`node-sass-chokidar` is used here as it addresses these issues.
466457

467458
## Adding Images, Fonts, and Files
468459

0 commit comments

Comments
 (0)