How to add SCSS styles to a React project?

Sometimes, we want to add SCSS styles to a React project.

In this article, we’ll look at how to add SCSS styles to a React project.

How to add SCSS styles to a React project?

To add SCSS styles to a React project, we can install the sass package if the React project is created with create-react-app.

To install it, we run:

npm install --save-dev sass

or

yarn add -D sass

Then we import a SCSS file by writing:

import '../scss/styles.scss';

We can rename all *.css files to *.scss to convert CSS files to SCSS files.

Conclusion

To add SCSS styles to a React project, we can install the sass package if the React project is created with create-react-app.