-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add SASS support documentation #1007 #1008
Changes from 6 commits
812330f
7bac2b9
8654e2f
a912a9d
412450d
c8bc52d
6eae103
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 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) | ||
|
@@ -301,6 +302,47 @@ 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.) | ||
|
||
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. 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 | ||
``` | ||
|
||
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": "npm run build-css && node-sass src/sass/base.scss src/index.css -w", | ||
... | ||
} | ||
... | ||
``` | ||
|
||
> 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`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this work on Windows? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "pasting [...] to" -> "adding [..] before` |
||
|
||
``` | ||
... | ||
"scripts": { | ||
"start": "npm run watch-css & react-scripts start", | ||
"build": "npm run build-css && react-scripts build", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I know for sure that There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
"build-css": "node-sass src/sass/base.scss src/index.css", | ||
"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" | ||
} | ||
... | ||
``` | ||
|
||
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. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Sass not SASS 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wow didn't know there is a website for that when I commented on this 😄