Commit 2de95c40 authored by Kelly's avatar Kelly Committed by Joe Haddad
Browse files

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
parent 2b596547
Showing with 13 additions and 22 deletions
+13 -22
...@@ -398,15 +398,14 @@ Following this rule often makes CSS preprocessors less useful, as features like ...@@ -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: 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`: Then in `package.json`, add the following lines to `scripts`:
```diff ```diff
"scripts": { "scripts": {
+ "build-css": "node-sass src/ -o src/", + "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", + "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test --env=jsdom", "test": "react-scripts test --env=jsdom",
...@@ -430,8 +429,8 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c ...@@ -430,8 +429,8 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
```diff ```diff
"scripts": { "scripts": {
"build-css": "node-sass src/ -o src/", "build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start", - "start": "react-scripts start",
- "build": "react-scripts build", - "build": "react-scripts build",
+ "start-js": "react-scripts start", + "start-js": "react-scripts start",
...@@ -442,27 +441,19 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c ...@@ -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:
``` - `node-sass --watch` has been reported to have *performance issues* in certain conditions when used in a virtual machine or with docker.
npm uninstall node-sass --save-dev
npm install node-sass-chokidar --save-dev
```
And in your scripts: - Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939)
```diff - `node-sass` has been reported as having issues with detecting new files in a directory [#1891](https://github.com/sass/node-sass/issues/1891)
"scripts": {
- "build-css": "node-sass src/ -o src/", `node-sass-chokidar` is used here as it addresses these issues.
- "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"
}
```
## Adding Images, Fonts, and Files ## Adding Images, Fonts, and Files
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment