Skip to content

Commit

Permalink
Update Sass docs (#2114)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
kellyrmilligan authored and Timer committed May 12, 2017
1 parent 2b59654 commit 2de95c4
Showing 1 changed file with 13 additions and 22 deletions.
35 changes: 13 additions & 22 deletions packages/react-scripts/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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

Expand Down

0 comments on commit 2de95c4

Please sign in to comment.