CSS not being applied to React + Vite application

[aloukikjoshi]

I’m facing an issue where my React + Vite project works fine locally — the CSS is applied properly both when running and building. But when I deploy the same project on Vercel, none of the styles are showing up.

Locally everything looks as expected, but on Vercel, the deployed site has no styling at all. Here’s the URL of the project: https://vercel.com/aloukikjoshis-projects/blogi

Framework: React + Vite
Hosted on: Vercel

I came across a suggestion on GitHub forums to try using Sass, but I’m unsure if that’s compatible with my current tech stack or if it’s the right fix.

Can someone help me understand why the styles aren’t applying on Vercel and if switching to Sass would solve this? Any help would be appreciated!

[miguelcabs]

Hey @aloukikjoshi can you share a quick screenshot of what you are seeing locally and on Vercel?

By the way, the link you shared is to your vercel project, not the site itself (not sure if that was intentional or not).

Switching to Sass shouldn’t be necessary, and CSS should just work since it just does your vite build step. So if there is an issue it’ll be around some configuration, and I’m happy to dive in!

Also, i know this sounds simple, but make sure it isn’t a caching issue and try from an incognito browser.

Let me know, we can definitely figure this out!

[aloukikjoshi]

You are right, switching to Sass was not necessary. I figured out the problem a few minutes ago — it was an issue in my vercel.json file related to the headers configuration. I’ve fixed it now, and my application is working smoothly.

Thanks so much for your quick response and willingness to help — I really appreciate the support!

[miguelcabs]

Woohoo nicely done! Can’t wait to see what ya ship!

[pawlean (Pauline P. Narvas)]

Appreciate you coming back with your solution, it’ll definitely help others in the community.

Thank you @miguelcabs for jumping in here as well!