Setup Sass In Create-React-App Without Ejecting

If you are using Create-React-App module to manage your no configuration react application development environment, this guide is to setup Sass compiler into the environment without ejecting the setup.

We know create-react-app comes with eject option, which will deploy all automatic confirmation to manual configuration, Even for a professional developers, it will be a headache while doing an upgrade in future. Currently, the create-react-app doesn’t come with Sass compiler but we can integrate it out of the box. This tutorial is to explain how to setup Sass compiler in the existing/new application without ejecting.

Node and NPM needs to be installed before continuing following steps.

Step 1:

Create react app using create-react-app by following syntax

npm install -g create-react-app
create-react-app
my-app cd my-app/
npm start

Step 2:

Install node-sass-chokidar from npm

npm install --save node-sass-chokidar

Step 3:

Open package.json and add the following into scripts configuration.

"scripts": {

To watch sass and compile use following command

npm run watch-css

Step 4:
Sometimes we miss to run the command while running the application, So let’s add this watch css to the application run command.

"scripts": {

now we don’t need to run separate commands to compile css.
Now running

npm start

and

npm run build

The command builds Sass files too.

Author: Vincent Raja

Front End Developer | React Suravali | Angular Puli | Hybrid App Singam View all posts by Vincent Raja