How to use Sass with React JS

February 2022 (149 Words, 1 Minutes)

Although it might seem a little complicated at first it is actually quite simple. Here are the steps to get you started (assuming that you used create-react-app for your app).

1. Install sass using npm

To install the sass package and save it as a dependency, run:

npm i sass --save

The latest version of sass should be installed and listed in the package.json file.

2. Create sass files

Now that you have sass installed, you can now use it in your application. Additionally, do not forget to import the stylesheets into your application. How I go about doing this is creating an scss folder (which will contain all of the stylesheets) inside of the src folder. I then import all of the styles in the folder into a single file (styles.js) so that I can import it into the root component of my app (App.js). Here is an example:

That is it! If you would like to see a working example of how to implement this, check out this calculator I made using sass.

Note: If you did not use create-react-app to create your application, you will need to find another way to use sass. One way you could do this is by installing the sass package on your system and making a custom script in your application to compile any sass files in your project. The official docs may be helpful if you need more assistance.

I hope this article helped. If you find an error or typo in one of my articles, please let me know.

NOTE: I AM NOT LIABLE FOR ANY DAMAGES THAT HAPPEN BECAUSE OF YOU FOLLOWING ONE OF MY ARTICLES. This is not to say the information here is incorrect. Please be careful.

Thumbnail image source: source