Easily Set Up SCSS ( Syntactically Awesome Style Sheet ) In ( Create-react-app )

Before you can use SCSS( Syntactically Awesome Style Sheet), you need to set it up on your project .

Preprocessing

CSS(Cascading Style Sheet) on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain the project. This is where a preprocessor can help reduce the complexity.

SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.

Below is the screenshot difference between CSS and SCSS file:

Let’s take a look at the easiest way to implement SCSS in a React project that we have created using the create-react-app command in terminal.

By using the command line to navigate to a location on your computer. once the create-react-app is reacted install the dependency node-sass by going to below link.

https://www.npmjs.com/package/node-sass

node-sass

Change .css files to .scss

Make sure that the file is also updated where it is imported.

Thats it done…!!!!

Now run your app and it will compile the SCSS.