Repository navigation
Add SASS documentation #1007
Description
Adding SASS (or Less) support in a project bootstrapped using create-react-app, doesn't require any advanced modifications. It's seems more intimidating than it actually is. We don't even have 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:
"scripts": {
...
"build-css": "node-sass src/sass/base.scss src/index.css",
"watch-css": "node-sass src/sass/base.scss src/index.css -w",
...
}
and run them alongside main scripts, by adding 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"
}
As far as I'm concerned, that works using Less as well.
Is that something that would belong in current documentation?
Activity
thien-do commentedon Nov 4, 2016
Yes you are correct. This has been mentioned several times in similar issues and @gaearon also suggest to add it into README but I think there is no PR yet. Do you want to make one?
Add SASS support documentation react#1007
Jony-Y commentedon Nov 18, 2016
how can we use this fix to actually use scss in multiple files and in multiple css files, e.g: I for a component FancyButton I would like to import a FancyButton.scss or not have scss compiled to index.css but to all css files
thien-do commentedon Nov 19, 2016
Hi @Jony-Y I believe you can. You only need to change the node-sass command to tell it to compile every sass in a directory and output each of them to a corresponding css file, in the same place.
I'm not sure the exact command format, but you can find it in CLI section in node-sass repo.
kirill-konshin commentedon Nov 19, 2016
There is a great project Foreman, whose Procfile's are used by TravisCI, this allows to configure and run parallel commands. Foreman is available as NPM package too.
For SASS/LESS/Whatever it might be useful to suggest/introduce a way to run this things in parallel with the build.
themre commentedon Dec 6, 2016
Any news on this? I found a way to store all scss files in some folder and export them in other:
-wis used for watch,-ois used for output. This will export individual files (scss -> css) into corresponding directory.Would be nice to include this somehow into webpack CSS bundle.
mewben commentedon Dec 13, 2016
@tsironis Thanks for the cool solution. I tried them but having a hard time including the sourcemap.
zhaoyao91 commentedon Dec 21, 2016
@mewben can you share your experience of setuping scss with sourcemap? thanks
aligajani commentedon Dec 27, 2016
@tsironis what's the difference between & vs. &&
zverbatim commentedon Dec 29, 2016
@aligajani with
&&the 2nd command will not run if the previous failssk33wiff commentedon Jan 25, 2017
👍
aligajani commentedon Feb 6, 2017
@tsironis How do we output source maps?
Add SASS support documentation #1007 (#1008)
gaearon commentedon Feb 12, 2017
Fixed via #1008.
Add SASS support documentation react#1007 (react#1008)
Add SASS support documentation react#1007 (react#1008)
Add SASS support documentation #1007 (#1008)
Add SASS support documentation react#1007 (react#1008)
Add SASS support documentation react#1007 (react#1008)
Merge upstream changes from create-react-app 0.9.x (#84)
sudip1072 commentedon Dec 9, 2018
Such problem came when you change your node version.Use following command and serve the application on browser.
npm rebuild node-sass --force