React and Sass setup. No Webpack. No BS.
Well, create-react-app v2 has out of the box support for SASS. click here to see how you can implement sass and react in create-react-app v2+ project. But for any other reason, continue reading.
TL;DR Go to this Github repository for boilerplate code and follow instructions for getting started in no time.
About a month ago, I started looking for a react-sass setup. After searching for a while, I found a few articles, some mentioning methods using Webpack and some without it. They were pretty complicated and hard to implement because all Webpack solutions required me to ‘eject’ my create-react-app under the hood modules, which completely destroys react’s convention over configuration ideology. I finally decided to give it a shot and prepare a boilerplate everyone can use.
The Solution should:
- work without ejecting.
- watch for changes in sass code.
- work without any code editor plugins.
- should work parallel to react server.
I came up with a solution which uses node-sass, npm-run-all and a few other libraries which anyone can install using npm install . So here’s how you do it.
Before you start
Here is my project structure (I’m using scss).
And here are my package.json settings.
Development setup:
- After you’re done with your
create react appsetup, install following packages using npm.npm install autoprefixer concat node-sass npm-run-all postcss-cli --save-dev - Open package.json and add
"watch:sass":"node-sass src/sass/main.scss src/App.css -w"to your"scripts":{...}.This script will compile and watch our files for any changes. - Assuming you have your ‘start’ script in your package.json, add
"startr":"npm-run-all — parallel start watch:sass"script to your"scripts":{...}. - That’s all. Now, you can use
npm run startrto start react server and node-sass watcher parallel to each other.
The boilerplate is available here:
https://github.com/rajaraghav/react-sass-boilerplate
That’s all folks.
Hope this article helped you.
