How to use Sass with React JS
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
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