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