-
-
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 1 commit
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 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 | ||
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. How about a broader/more general title? As you explained below, SASS is just an example, that your approach can be applied for other things like LESS. So, I think maybe this title is too specific. How about Actually.. this technique can be applied to a much wider situation than just CSS.. technically everything that can be watch.. but the term "CSS Preprocessor" seems easy to understand and popular |
||
|
||
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": "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.
|
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.
Sass not SASS - it's a backronym.