How to add scss/sass in react.js?

Hey, my name is Rajdeep Singh. in this article, I’m told you How to add scss or sass in your react project.

demo:
https://codesandbox.io/s/how-to-add-scsssass-inreactjs-04wg0?fontsize=14&hidenavigation=1&theme=dark

What is Sass?
According to Wikipedia sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

FOR MORE:
Basic Infomation about sass/scss According to Wikipedia sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style…medium.com

Let’s start:
If you use the create-react-app in your project use npm, you can easily install and use Sass in your React projects with 3 simple steps.

Steps:
1.Install node-sass: npm install node-sass
2.Change file extension .css to .scss
3.Import your .scss files in your React components

demo:

https://codesandbox.io/s/how-to-add-scsssass-inreactjs-04wg0?fontsize=14&hidenavigation=1&theme=dark

Conclusion:
my thought read this article you definitely use sass or scss in your project any problem, query, suggestion tell me to comment below.

Read More
https://www.officialrajdeepsingh.dev/
https://officialrajdeepsingh.medium.com/

thanks for reading
— happy coding —

Comments

[Dennis Aleksandrov]

How would you install dart-sass so to use the @use instead of @import since @import will be removed someday.

[Salman Ahmed]

Thank you so much share.

[Rajdeep Singh]

most welcome @Salman Ahmed and thank to share feedback for me
---happy coding---