Skip to content

Commit

Permalink
Add SASS support documentation facebook#1007
Browse files Browse the repository at this point in the history
  • Loading branch information
tsironis authored Nov 4, 2016
1 parent 79160b8 commit 812330f
Showing 1 changed file with 42 additions and 0 deletions.
42 changes: 42 additions & 0 deletions packages/react-scripts/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit 812330f

Please sign in to comment.