DEV Community

Cover image for How to add Sass support to a Vite React app
Rohan Villoth
Rohan Villoth

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (7)

Collapse
 
zynth17 profile image
Christopher Reeve

sass + css module is good

Collapse
 
stephanep profile image
Stephane Paul

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

Collapse
 
sarang13579 profile image
Sarang

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

Collapse
 
amodeusr profile image
Ricardo Magalhães • Edited

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

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

Collapse
 
japcode profile image
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

Collapse
 
jkuffler profile image
Jason Kuffler

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

Collapse
 
taauntik profile image
Tasnim Ahmed Auntik

Thank you for your help. It helps me a lot