Wojtek-R's avatar

Vite - styles brakes after closing "npm run dev" process

I am using laravel with Vite and Valet. I have added some styling using tailwind. When I run npm run build initially, styles work fine, after that I use npm run dev (for applying live changes). When I close that process in phpStorm terminal my styles break completely and are not loading until i run npm run dev again. What may be causing this behaviour?

1 like
10 replies
Sinnbeck's avatar

You need to recompile them with npm run build if you want to see them without running npm run dev

The dev server does not write to any static files

Wojtek-R's avatar

@Sinnbeck tried that, but they only seem to work on run dev now for some weird reason.

Sinnbeck's avatar

@Wojtek-R Then I need more information. So currently you run npm run build and what isnt working exactly?

Wojtek-R's avatar

@Sinnbeck so basically the page is loading but no styles are applied at all, just plain html. They get applied only wile npm run dev is running. There is no errors either.

Sinnbeck's avatar

@Wojtek-R Any errors in the browser console?

Check if there is a file named hotin the /public directory. Delete it if there is. It should be automatically removed when stopping npm run dev but maybe it wasn't

2 likes
Wojtek-R's avatar

@Sinnbeck Indeed, I can find a file called "hot". Styles are re-aplied after I delete it, it does not delete itself for some reason. Any solution to that?

Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

@Wojtek-R Sounds like you arent stopping npm run dev properly. Stop it using ctrl+c. Never just close the window

1 like
Wojtek-R's avatar

@Sinnbeck it is being deleted when I use ctrl + c. I was closing it using ctrl + z which I thought wasn't different but it is. I used it before without any issues, maybe it was changed with the new version? Anyways many thanks for your help!

Sinnbeck's avatar

@Wojtek-R Happy to help :) Its important it gets the proper shutdown signal. If its solved please mark the thread as solved by marking a best answer

1 like

Please or to participate in this conversation.