From 80a10bfba44dc7e9bb6a5357312bd2a985bf3b2a Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Wed, 10 May 2017 13:56:07 -0500 Subject: [PATCH 01/10] update readme with fix from https://github.com/facebookincubator/create-react-app/issues/1939 --- packages/react-scripts/template/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 1c781cbe975..7ae93a9f215 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -207,7 +207,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Displaying Lint Output in the Editor ->Note: this feature is available with `react-scripts@0.2.0` and higher. +>Note: this feature is available with `react-scripts@0.2.0` and higher. >It also only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. @@ -406,7 +406,7 @@ 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", ++ "watch-css": "npm run build-css && node-sass src/*.scss -o src/ --watch --recursive", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", @@ -431,7 +431,7 @@ 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", + "watch-css": "npm run build-css && node-sass src/*.scss -o src/ --watch --recursive", - "start": "react-scripts start", - "build": "react-scripts build", + "start-js": "react-scripts start", From d406724cc5a48c35e1a038a755c1b6faccef1d6f Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Wed, 10 May 2017 15:46:35 -0500 Subject: [PATCH 02/10] update with better globbing --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 7ae93a9f215..01645ad31ee 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -406,7 +406,7 @@ 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/*.scss -o src/ --watch --recursive", ++ "watch-css": "npm run build-css && node-sass src/**/*.scss -o src/ --watch --recursive", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", @@ -431,7 +431,7 @@ 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/*.scss -o src/ --watch --recursive", + "watch-css": "npm run build-css && node-sass src/**/*.scss -o src/ --watch --recursive", - "start": "react-scripts start", - "build": "react-scripts build", + "start-js": "react-scripts start", From 24f3fcd7afbd48d40242749514407aba2039dbfe Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Wed, 10 May 2017 16:07:46 -0500 Subject: [PATCH 03/10] added note --- packages/react-scripts/template/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 01645ad31ee..53469fb0abd 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -414,6 +414,8 @@ Then in `package.json`, add the following lines to `scripts`: >Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. +>Note: You can also use `**/*.sass` if you are using `.sass` files + Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated. To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions. From b3ce3f7dc59fd9087f01238ff5af50baf072aea1 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 11 May 2017 10:44:58 -0500 Subject: [PATCH 04/10] updating with a note and reverting previous changes --- packages/react-scripts/template/README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 53469fb0abd..a82d5c7329d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -400,13 +400,14 @@ First, let’s install the command-line interface for Sass: ``` npm install node-sass --save-dev ``` +>Note: If your project experiences an issue where it constantly recompiles, try switching to [node-sass-chokidar](https://www.npmjs.com/package/node-sass-chokidar) instead. 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/**/*.scss -o src/ --watch --recursive", ++ "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", @@ -414,8 +415,6 @@ Then in `package.json`, add the following lines to `scripts`: >Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. ->Note: You can also use `**/*.sass` if you are using `.sass` files - Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated. To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions. @@ -433,7 +432,7 @@ 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/**/*.scss -o src/ --watch --recursive", + "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", - "start": "react-scripts start", - "build": "react-scripts build", + "start-js": "react-scripts start", From 3dc41f0a530118502632cc933a1c8717212fa817 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 11 May 2017 11:27:00 -0500 Subject: [PATCH 05/10] how about this? --- packages/react-scripts/template/README.md | 34 ++++------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a82d5c7329d..b0fec02d73d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -398,16 +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 ``` ->Note: If your project experiences an issue where it constantly recompiles, try switching to [node-sass-chokidar](https://www.npmjs.com/package/node-sass-chokidar) instead. - 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", @@ -431,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", @@ -443,28 +441,6 @@ 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. - -**Performance Note** - -`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`: - -``` -npm uninstall node-sass --save-dev -npm install node-sass-chokidar --save-dev -``` - -And in your 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" - } -``` - ## Adding Images, Fonts, and Files With Webpack, using static assets like images and fonts works similarly to CSS. From 8eaaad3178cd4e4cadcf367b176df1cd0eab013b Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 11 May 2017 11:59:41 -0500 Subject: [PATCH 06/10] refactor --- packages/react-scripts/template/README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index b0fec02d73d..23285959841 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -441,6 +441,18 @@ 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. + +**Why `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. + +- Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939) + + `node-sass-chokidar` is used here as it addresses these issues. + ## Adding Images, Fonts, and Files With Webpack, using static assets like images and fonts works similarly to CSS. From 1baf6458792417c3240546d4d338fd77c12c8397 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 11 May 2017 12:03:20 -0500 Subject: [PATCH 07/10] added note about new files back in after verifying locally --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 23285959841..bec62c29a0a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -441,7 +441,7 @@ 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. +Now running `npm start` and `npm run build` also builds Sass files. Note that `node-sass-chokidar` seems to have an issue recognizing newly created files on some systems so you might need to restart the watcher when you create a file until it’s resolved. **Why `node-sass-chokidar`?** From df678234e90187ba5112dd713b8e03f996738df9 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 11 May 2017 14:54:32 -0500 Subject: [PATCH 08/10] spaces back in, sorry was my editor! --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index bec62c29a0a..28637122a00 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -207,7 +207,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Displaying Lint Output in the Editor ->Note: this feature is available with `react-scripts@0.2.0` and higher. +>Note: this feature is available with `react-scripts@0.2.0` and higher. >It also only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. From 32653a09fb8fb938f79b2a4bddb1545ed81b59b3 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 11 May 2017 14:57:37 -0500 Subject: [PATCH 09/10] removed note about new files :) --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 28637122a00..39a41d83207 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -441,7 +441,7 @@ 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-chokidar` seems to have an issue recognizing newly created files on some systems 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. **Why `node-sass-chokidar`?** From 2b85cfd98af634127d22d68187b5370ea81a2842 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 11 May 2017 15:35:59 -0500 Subject: [PATCH 10/10] added bullet about new files issue currently open on node-sass --- packages/react-scripts/template/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 39a41d83207..bb340a75928 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -451,6 +451,8 @@ Now running `npm start` and `npm run build` also builds Sass files. - Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939) +- `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