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 startStep 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.
