You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* update CSS preprocessor instructions
- Windows shell users should note that running two programs simultaneously is not supported.
* 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
* Add tweaks from PR discussion
Copy file name to clipboardexpand all lines: template/README.md
+10-3
Original file line number
Diff line number
Diff line change
@@ -408,16 +408,23 @@ Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`.
408
408
409
409
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.
410
410
411
-
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:
411
+
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:
412
+
413
+
```
414
+
npm install --save-dev npm-run-all
415
+
```
416
+
417
+
Then we can change `start` and `build` scripts to include the CSS preprocessor commands:
412
418
413
419
```diff
414
420
"scripts": {
415
421
"build-css": "node-sass src/ -o src/",
416
422
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
417
423
- "start": "react-scripts start",
418
424
- "build": "react-scripts build",
419
-
+ "start": "react-scripts start & npm run watch-css",
420
-
+ "build": "react-scripts build && npm run build-css",
425
+
+ "start-js": "react-scripts start",
426
+
+ "start": "npm-run-all -p watch-css start-js",
427
+
+ "build": "npm run build-css && react-scripts build",
0 commit comments