loading...
Cover image for How to add scss/sass in react.js?

How to add scss/sass in react.js?

officialrajdeepsingh profile image Rajdeep singh Originally published at codesandbox.io ・1 min read

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.

thanks for reading
— happy coding —

Discussion

pic
Editor guide
Collapse
salmancreation profile image
Salman Ahmed

Thank you so much share.

Collapse
officialrajdeepsingh profile image
Rajdeep singh Author

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

Collapse
formidablepencil profile image
Dennis Aleksandrov

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