-
-
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 4 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.) | ||
|
||
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. | ||
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.
Let's not sell CSS preprocessors 😉 |
||
|
||
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": "npm run build-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. | ||
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. "should be just" -> "should generally be" 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. "To use a different preprocessor, replace..." |
||
|
||
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.
Ok, this is just a pure and not serious comment: when I saw you change the name from "Less" to "LESS", I'm wondering what is the official term, so I take a look at both website and realize that they actually use the lower case :)) It is "Sass" and "Less". I previously thought that it is "Less" because it is not a shorthand, while "SASS" is acutally short for "Syntactically Awesome Stylesheets".
Turn out they are all written as Sass and Less in their website..
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.
I honestly don't know, but I don't have any strong feelings on this, so whatever you see more fit!
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.
So, Wikipedia stylises these words as following: Sass and Less. I'm updating source code accordingly.