From 52b63818e77e72f1c7d27a89e9a8b0c52a571404 Mon Sep 17 00:00:00 2001 From: Alessandro Burato Date: Sun, 12 Feb 2017 22:31:32 +0100 Subject: [PATCH 1/3] update CSS preprocessor instructions - Windows shell users should note that running two programs simultaneously is not supported. --- 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 34628cce75c..ea9ba8cfa63 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -410,6 +410,8 @@ At this point you might want to remove all CSS files from the source control, an As a final step, you may find it convenient to run `watch-css` automatically with `npm start`, and run `build-css` as a part of `npm run build`. You can use `&` operator for executing scripts in parallel, and `&&` for executing them sequentially: +>Note: Windows shells (both CMD and Powershell) do not support the single `&` character. This means that *only the updated `build` script will actually work on Windows* and you'll have to start the `watch-css` script separately. + ```diff "scripts": { "build-css": "node-sass src/ -o src/", From 85977c49241810daf60c302e6be10dd3cc984f43 Mon Sep 17 00:00:00 2001 From: Alessandro Burato Date: Sun, 12 Feb 2017 23:13:40 +0100 Subject: [PATCH 2/3] fix the order of SASS build step - the suggested build step with integrated CSS preprocessing is wrong. The SASS preprocessor should run first, then the react-scripts build will pick the up-to-date final CSS --- 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 ea9ba8cfa63..a63b51ec532 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -419,7 +419,7 @@ As a final step, you may find it convenient to run `watch-css` automatically wit - "start": "react-scripts start", - "build": "react-scripts build", + "start": "react-scripts start & npm run watch-css", -+ "build": "react-scripts build && npm run build-css", ++ "build": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } From 5a676136e597c0a911c71d762365c5df319e5227 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 13 Feb 2017 18:43:53 +0000 Subject: [PATCH 3/3] Add tweaks from PR discussion --- packages/react-scripts/template/README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a63b51ec532..82c94f99d5a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -408,9 +408,13 @@ Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. At this point you might want to remove all CSS files from the source control, and add `src/**/*.css` to your `.gitignore` file. It is generally a good practice to keep the build products outside of the source control. -As a final step, you may find it convenient to run `watch-css` automatically with `npm start`, and run `build-css` as a part of `npm run build`. You can use `&` operator for executing scripts in parallel, and `&&` for executing them sequentially: +As a final step, you may find it convenient to run `watch-css` automatically with `npm start`, and run `build-css` as a part of `npm run build`. You can use the `&&` operator to execute two scripts sequentially. However, there is no cross-platform way to run two scripts in parallel, so we will install a package for this: ->Note: Windows shells (both CMD and Powershell) do not support the single `&` character. This means that *only the updated `build` script will actually work on Windows* and you'll have to start the `watch-css` script separately. +``` +npm install --save-dev npm-run-all +``` + +Then we can change `start` and `build` scripts to include the CSS preprocessor commands: ```diff "scripts": { @@ -418,7 +422,8 @@ As a final step, you may find it convenient to run `watch-css` automatically wit "watch-css": "npm run build-css && node-sass src/ -o src/ --watch", - "start": "react-scripts start", - "build": "react-scripts build", -+ "start": "react-scripts start & npm run watch-css", ++ "start-js": "react-scripts start", ++ "start": "npm-run-all -p watch-css start-js", + "build": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject"