Using Sass with React (without ejecting or running an extra process)

I’ve started learning React couple of weeks ago and, whilst being in awe of how many open-source tools and libraries are out there, I’m still not comfortable with some of the complicated processes to get started. This is my first attempt at contributing to the simplification of those processes.

Scenario:

The simplest way to create a React app is by using the official Create React App — it allows a complete beginner to get up and running using a simple command:

create-react-app hello-world

whist avoiding going down the rabit hole that leads to Javascript fatigue. To start the app one has to simply type:

npm start

… and you’re off to the races.

You also want to also use Sass in your app. There are 2 ways to do this:

1. Eject your React app

‘Ejecting’ is the process of removing some of the ‘magic’ of create-react-app by revealing all the build dependencies, configs, and scripts — they’re moved inside the project. This is great for advanced devs (allows better customisation) but is confusing for beginners. You can read more on this here.

2. Use a separate process to run the Sass to CSS conversion

Sass is a Ruby gem so one could run a conversion to CSS using this gem and then include the CSS in the React app. Good news: this is a simple process since Ruby comes preinstalled on all modern OS’. Bad news: one needs to run a separate process to do conversion, parallel to the node server that is serving the React app. You can read more on this here.

Problem:

You want to continue using npm start to run your app and not worry about the internals.

Solution:

We’ll be using the Sass gem and ‘merge’ it inside the React app.

1. Install the Sass ruby gem

Refer to the instructions on the Sass website on how to install. To check the installation, run:

$ gem list | grep sass
…
sass (3.5.1)
sass-listen (4.0.0)
…

2. Create the React app

Let’s create a new app:

$ create-react-app helloworld
...
$ cd helloworld

You can now run the start script and see your React app:

$ npm start

3. Sass source & CSS destination

We’ll now create the Sass source and CSS destination folders:

mkdir -p src/styles/scss src/styles/css

NB: SCSS (Sassy CSS) is the main Sass implementation since Sass v.3. Read more here.

Let’s also create the source App SCSS file:

touch src/styles/scss/App.scss

The conversion process is simple enough — we’ll use the sass executable installed by the gem:

$ which sass
/usr/local/bin/sass
$ sass — help
Usage: sass [options] [INPUT] [OUTPUT]
Description:
 Converts SCSS or Sass files to CSS.
...

Here is the conversion command — it will continuously watch for changes in the src/styles/scss folder and run the output to the src/styles/css folder.

$ sass — watch src/styles/scss:src/styles/css
>>> Sass is watching for changes. Press Ctrl-C to stop.
 write src/styles/css/App.css
 write src/styles/css/App.css.map

4. Use the converted App.css

We’ll now instruct React to use the converted CSS file. At the moment App.js uses the App.css inside the src folder:

We’ll delete that file and reference src/styles/css/App.css inside App.js:

NB: The initial CSS is now gone, so your React app will look ‘funny’.

5. All together now!

All that’s left is to add the sass conversion script as part of the React start process. This is done by changing the start script inside package.json:

{
 "name": "helloworld",
 ...
 "start": "sass — watch src/styles/scss:src/styles/css | react-scripts start",
 ...
}

You can now start the server using npm start and start using Sass inside your React app.

One more thing

The Sass gem uses a temporary folder (.sass-cache) during the conversion process — add it to the project .gitignore file so it won’t be pushed to your VC server.

That’s all folks!

Hope this proves helpful to people. A copy of the project is available on Github. As ever, feel free to add a comment below with suggestions/criticism etc.

Happy coding!