How to add SASS to a create-react-app Project?

Using SASS is one of the best ways of styling modern web applications. It essentially helps us write more maintainable and modular CSS code, but CRA doesn't support it out of the box. This article will help you do that.

TL;DR

1. install node-sass as a dependency.
2. change .css to .scss or .sass file extension.
3. import the .scss or .sass files instead of .css files inside the components.

1. Adding node-sass To get started with SASS in React we first have to install an npm package node-sass in our react app.

npm i node-sass

or, if you're using yarn

yarn add node-sass

2. Changing file extensions Now, change the .css file extension to .scss.

Note that SASS offers two syntaxes, one is .scss which we are going to use and the other is .sass which is known as the indented syntax. The .sass files differ in the indentation it uses instead of curly braces and semicolons.

3. Changing imports Change the imports in your components to .scss instead of .css

And we are ready to use SASS in our app.