From 812330fe8c506514c689de4b6517f4297f3d983a Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Fri, 4 Nov 2016 13:20:01 +0200 Subject: [PATCH 1/7] Add SASS support documentation #1007 --- packages/react-scripts/template/README.md | 42 +++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3203c5fcbb9..c717a872bcc 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -18,6 +18,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) +- [Adding SASS Support](#adding-sass-support) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Adding Bootstrap](#adding-bootstrap) @@ -301,6 +302,47 @@ becomes this: There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. +## Adding SASS Support + +CSS preprocessors have become a vital part of build processes. Using a preprocesssor of your choice in a project bootstrapped using create-react-app, is fairly straightforward to setup, even without having to eject. + +First, install preprocessor of your choice. SASS seems the most popular weapon of choice at the moment, so we'll use it as an example. + +``` +npm install node-sass --save-dev +``` + +Then in `package.json` just add the following lines to `scripts`, replacing file paths accordingly. +``` + ... + "scripts": { + ... + "build-css": "node-sass src/sass/base.scss src/index.css", + "watch-css": "node-sass src/sass/base.scss src/index.css -w", + ... + } + ... +``` + +> Using a different preprocessor should be just a matter of replacing `build-css` and `watch-css` scripts to something that matches the preprocessor you're using. + +Add these scripts to the main scripts, by pasting `npm run watch-css &` to `start` script and `npm run build-css &&` to `build`. + +``` + ... + "scripts": { + "start": "npm run watch-css & react-scripts start", + "build": "npm run build-css && react-scripts build", + "build-css": "node-sass src/sass/base.scss src/index.css", + "watch-css": "node-sass src/sass/base.scss src/index.css -w", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } + ... +``` + +Finally, you can use `npm start` or `npm run build` as usual. + ## Adding Images and Fonts With Webpack, using static assets like images and fonts works similarly to CSS. From 7bac2b9c0c461ddd0665fd2237803330491c76e5 Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Fri, 4 Nov 2016 15:27:36 +0200 Subject: [PATCH 2/7] Change SASS section title to more generic label --- 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 c717a872bcc..322bb03e188 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -18,7 +18,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) -- [Adding SASS Support](#adding-sass-support) +- [Adding CSS Preprocessor (SASS, Less etc.](#adding-sass-support) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Adding Bootstrap](#adding-bootstrap) @@ -302,7 +302,7 @@ becomes this: There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. -## Adding SASS Support +## Adding CSS Preprocessor (SASS, LESS etc.) CSS preprocessors have become a vital part of build processes. Using a preprocesssor of your choice in a project bootstrapped using create-react-app, is fairly straightforward to setup, even without having to eject. From 8654e2f4ca3ff4d9ba41237bdcf65aa1c2a1d4c5 Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Fri, 4 Nov 2016 15:28:50 +0200 Subject: [PATCH 3/7] Fix link in Table of Contents --- 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 322bb03e188..a524acb408f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -18,7 +18,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) -- [Adding CSS Preprocessor (SASS, Less etc.](#adding-sass-support) +- [Adding CSS Preprocessor (SASS, Less etc.](#adding-css-preprocessor-sass-less-etc) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Adding Bootstrap](#adding-bootstrap) From a912a9d0daebee5f4daf79fe1e6672e404f35ed3 Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Sun, 6 Nov 2016 18:38:08 +0200 Subject: [PATCH 4/7] Chain build-css with watch-css script, fix typos --- 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 a524acb408f..8e3a90cd464 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -18,7 +18,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) -- [Adding CSS Preprocessor (SASS, Less etc.](#adding-css-preprocessor-sass-less-etc) +- [Adding CSS Preprocessor (SASS, LESS etc.)](#adding-css-preprocessor-sass-less-etc) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Adding Bootstrap](#adding-bootstrap) @@ -318,7 +318,7 @@ Then in `package.json` just add the following lines to `scripts`, replacing file "scripts": { ... "build-css": "node-sass src/sass/base.scss src/index.css", - "watch-css": "node-sass src/sass/base.scss src/index.css -w", + "watch-css": "npm run build-css && node-sass src/sass/base.scss src/index.css -w", ... } ... @@ -334,7 +334,7 @@ Add these scripts to the main scripts, by pasting `npm run watch-css &` to `star "start": "npm run watch-css & react-scripts start", "build": "npm run build-css && react-scripts build", "build-css": "node-sass src/sass/base.scss src/index.css", - "watch-css": "node-sass src/sass/base.scss src/index.css -w", + "watch-css": "npm run build-css && node-sass src/sass/base.scss src/index.css -w", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } From 412450dfd5512a5155bb59855ddb3171022beaf7 Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Thu, 10 Nov 2016 11:37:07 +0200 Subject: [PATCH 5/7] Update Sass and Less naming style --- 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 8e3a90cd464..dca332d0fd4 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -18,7 +18,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) -- [Adding CSS Preprocessor (SASS, LESS etc.)](#adding-css-preprocessor-sass-less-etc) +- [Adding CSS Preprocessor (Sass, Less etc.)](#adding-css-preprocessor-sass-less-etc) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Adding Bootstrap](#adding-bootstrap) @@ -302,11 +302,11 @@ becomes this: There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. -## Adding CSS Preprocessor (SASS, LESS etc.) +## Adding CSS Preprocessor (Sass, Less etc.) CSS preprocessors have become a vital part of build processes. Using a preprocesssor of your choice in a project bootstrapped using create-react-app, is fairly straightforward to setup, even without having to eject. -First, install preprocessor of your choice. SASS seems the most popular weapon of choice at the moment, so we'll use it as an example. +First, install preprocessor of your choice. Sass seems the most popular weapon of choice at the moment, so we'll use it as an example. ``` npm install node-sass --save-dev From c8bc52da59ef5f9b2f356e66c821b5f4dc17e068 Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Mon, 21 Nov 2016 12:05:01 +0200 Subject: [PATCH 6/7] Fix wording, remove offensive words --- 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 dca332d0fd4..26266a14166 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -304,9 +304,9 @@ There is currently no support for preprocessors such as Less, or for sharing var ## Adding CSS Preprocessor (Sass, Less etc.) -CSS preprocessors have become a vital part of build processes. Using a preprocesssor of your choice in a project bootstrapped using create-react-app, is fairly straightforward to setup, even without having to eject. +Using a CSS preprocesssor in a project bootstrapped using create-react-app, is fairly straightforward to setup, even without having to eject. -First, install preprocessor of your choice. Sass seems the most popular weapon of choice at the moment, so we'll use it as an example. +First, install preprocessor of your choice. We will be using SASS in this example, but you can replace SASS with a preprocessor of your choice. ``` npm install node-sass --save-dev @@ -324,7 +324,7 @@ Then in `package.json` just add the following lines to `scripts`, replacing file ... ``` -> Using a different preprocessor should be just a matter of replacing `build-css` and `watch-css` scripts to something that matches the preprocessor you're using. +> To use a different preprocessor, replace `build-css` and `watch-css` scripts to match the one you're using. Add these scripts to the main scripts, by pasting `npm run watch-css &` to `start` script and `npm run build-css &&` to `build`. From 6eae103076603b003e2f5d55f1c53c206fe516a2 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sun, 12 Feb 2017 00:37:34 +0000 Subject: [PATCH 7/7] Slightly rewite --- packages/react-scripts/template/README.md | 61 ++++++++++++----------- 1 file changed, 33 insertions(+), 28 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 26266a14166..c97f51aa8f7 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -18,7 +18,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) -- [Adding CSS Preprocessor (Sass, Less etc.)](#adding-css-preprocessor-sass-less-etc) +- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Adding Bootstrap](#adding-bootstrap) @@ -302,46 +302,51 @@ becomes this: There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. -## Adding CSS Preprocessor (Sass, Less etc.) +## Adding a CSS Preprocessor (Sass, Less etc.) -Using a CSS preprocesssor in a project bootstrapped using create-react-app, is fairly straightforward to setup, even without having to eject. +Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a `.Button` CSS class in `` and `` components, we recommend creating a `