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! 😁
Top comments (7)
sass + css module is good
You should not be using node-sass but sass yarn add --dev sass
Thanks it works, I was facing problem with nano-react-app
It didn't work for me... ಥ_ಥ
Edit.: Actually I just needed to restart the dev server \o/
I had the same problem and your comment saved me and saved me more hours trying to fix it, I love you so much
i appreciate your quick fix post! i was doing the same thing as normal react; though, intentionally using vite.js :D
Thank you for your help. It helps me a lot