Add SASS documentation

[tsironis]

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?

[thien-do]

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?

[Jony-Y]

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]

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]

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]

Any news on this? I found a way to store all scss files in some folder and export them in other:

"build-css": "node-sass src/style/sass/ -o src/style/css/",
 "watch-css": "node-sass -w src/style/sass/ -o src/style/css/",

-w is used for watch, -o is 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]

@tsironis Thanks for the cool solution. I tried them but having a hard time including the sourcemap.

[zhaoyao91]

@mewben can you share your experience of setuping scss with sourcemap? thanks

[aligajani]

@tsironis what's the difference between & vs. &&

[zverbatim]

@aligajani with && the 2nd command will not run if the previous fails

[sk33wiff]

👍

[aligajani]

@tsironis How do we output source maps?

[gaearon]

Fixed via #1008.

[ghost]

For some reason the first command creates css file from scss and goes in watch state. But the project never starts. To make both commands work, i need to remove watch. But i want to watch awa start

[sudip1072]

Such problem came when you change your node version.Use following command and serve the application on browser.
npm rebuild node-sass --force