How to set up sass compiler in your React js app?
React js one of the famous front-end library for creating websites. React js do provide create-react-app CLI tool through which you can create a ReactJs app in seconds. If you have node js installed in your machine and you can install the create-react-app package by running below command in your CLI.

Once you run below command after that you we can easily create react js app. Please run below command to create React js app.

Once your app created after that run below command to enter into the created app.
cd test-app
Open your project into some nice code editor and you will see below folder structure.

Now we will try to set up sass compiler for our project. For SASS we will definitely need sass dependency added into our package.json file.
Now run below command in your CLI to add node-sass compiler to add compile your sass file.

Once you run this command you will able to see this dependency added in your package.json file. After that, you have to add below command in under scripts section in your package.json file.

So you can see in above screen print that we have added sass command under scripts so all you need to do is you have to run this npm run sass command in the tab while you are doing development. Also if you see on left I have created two folders under src folder. One folder for all your SASS file that you have to put there and once you add code in sass file your compiler will compile your file and it will create one single CSS file and put under CSS folder and that single CSS file you have to put under your index.js file. For more details please find below screen print.

In Above screen, you can see that how you have to create your SASS file in the respective folder and once you make any change your SASS compiler will detect that change dynamically and it will get reflected in your browser. You can also see that how index.css file is created and all you have to do is link that CSS file in your index.js fie to link this compiled CSS with your React app.

In the above screen print, you can see that how I have linked compile CSS with our React app. Now run your app using npm run sass and you will able to see this CSS getting applied to our view.

As you can see it is very simple to link SASS compiler with React js app.
You can find above code my repository link.
Please feel free to comment on this and let me know what your view on this. Happy Hacking!!
