Setup Sass In Create-React-App Without Ejecting

Author: | Posted in CSS, React, Tutorials No comments

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.

Setup Sass In Create-React-App Without Ejecting

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": {
“build-css”: “node-sass-chokidar src/ -o src/”,
“watch-css”: “npm run build-css && node-sass-chokidar src/ -o src/ –watch –recursive” }

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": {
“build-css”: “node-sass-chokidar src/ -o src/”,
“watch-css”: “npm run build-css && node-sass-chokidar src/ -o src/ –watch –recursive”,

 

“start”: “react-scripts start”,

 

“build”: “react-scripts build”,

 

“start-js”: “react-scripts start”,

 

“start”: “npm-run-all -p watch-css start-js”,

 

“build”: “npm run build-css && react-scripts build”, }

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.

Add Your Comment