Skip to content

Commit e276ddb

Browse files
Alessandro Buratogaearon
Alessandro Burato
authored andcommitted
update CSS preprocessor instructions (facebook#1543)
* 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
1 parent ecb3f59 commit e276ddb

File tree

1 file changed

+10
-3
lines changed

1 file changed

+10
-3
lines changed

template/README.md

+10-3
Original file line numberDiff line numberDiff line change
@@ -408,16 +408,23 @@ Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`.
408408

409409
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.
410410

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:
412418

413419
```diff
414420
"scripts": {
415421
"build-css": "node-sass src/ -o src/",
416422
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
417423
- "start": "react-scripts start",
418424
- "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",
421428
"test": "react-scripts test --env=jsdom",
422429
"eject": "react-scripts eject"
423430
}

0 commit comments

Comments
 (0)