From 0340acb24aa93c8c5ac5c4c01ccd6f0ab9a14d8e Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Fri, 19 May 2017 12:41:49 -0500 Subject: [PATCH 1/2] update readme with example of include path --- packages/react-scripts/template/README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a7db0622258..41b702f0b43 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -472,6 +472,19 @@ Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. 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. +To enable importing files without using relative paths, you can add the `--include-path` option to the command in `package.json`. + +``` +"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/", +"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive", +``` + +This will allow you to do imports like +```scss +@import 'styles/_colors.scss'; //assuming a styles directory under src/ +@import 'nprogress/nprogress'; //importing the css file from the nprogress node module +``` + 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 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: From 5403e9dd1f1c1acabf82eee6384a05cd2d01d056 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 19 May 2017 19:28:25 +0100 Subject: [PATCH 2/2] Update README.md --- packages/react-scripts/template/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 41b702f0b43..cb2149b97c0 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -480,9 +480,10 @@ To enable importing files without using relative paths, you can add the `--incl ``` This will allow you to do imports like + ```scss -@import 'styles/_colors.scss'; //assuming a styles directory under src/ -@import 'nprogress/nprogress'; //importing the css file from the nprogress node module +@import 'styles/_colors.scss'; // assuming a styles directory under src/ +@import 'nprogress/nprogress'; // importing a css file from the nprogress node module ``` 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.