kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-01-13 09:00:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update Sass docs (#2114)

Browse Source 
* 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
This commit is contained in:
Kelly
2017-05-11 23:00:45 -05:00
committed by Joe Haddad
parent 2b596547c8
commit 2de95c4097
1 changed files with 13 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/react-scripts/template/README.md
View File

@@ -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