How to add Sass support to a Vite React app

After styling React components through CSS-in-JS (JSS) for a while, I came across "Style React Components: 7 Ways Compared" and decided to switch to my favorite preprocessor, Sass. So, I followed "Adding Sass to Create React App Applications" and ran this:

yarn add node-sass

That was supposed to work. However, on importing Login.scss file into Login.jsx with import './Login.scss', I encountered this error:

[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?

Turns out this project was using something called Vite and so I have to find a way to make Sass work with Vite. I googled and found Vite mentioning CSS Pre-processors support on their docs and this article titled "What is Vitejs? An Overview of the New Front-end Build Tool" suggesting npm install sass --save-dev. I referred yarn-install docs and converted it for yarn:

yarn add sass --dev

Now my Sass styles started working! So, I guess Vite needed a different approach than the usual React method. To make sure node-sass isn't used at all, I removed it:

yarn remove node-sass

and everything seems to work so far. In case I find anything breaking later, will update here. Happy sass'ing! 😁

Credits & Sources

Cover image made from logos of Sass, Vite and React

Comments

[Christopher Reeve]

sass + css module is good

[Sarang]

Thanks it works, I was facing problem with nano-react-app

[Stephane Paul]

You should not be using node-sass but sass yarn add --dev sass

[Ricardo Magalhães]

It didn't work for me... ಥ_ಥ

Edit.: Actually I just needed to restart the dev server \o/

[JapCrowley]

I had the same problem and your comment saved me and saved me more hours trying to fix it, I love you so much

[Jason Kuffler]

i appreciate your quick fix post! i was doing the same thing as normal react; though, intentionally using vite.js :D

[Tasnim Ahmed Auntik]

Thank you for your help. It helps me a lot