Level 102
Hard to say without more information :) What breaks exactly?
Jan 16, 2025
6
Level 1
npm run dev breaks the css
I am having a problem where when I run npm run dev, the css doesn't render properly. When I run npm run build, the css does compile properly. Is there a fix to this? I am guessing this is a Vite issue.
Level 1
@Sinnbeck tailwindcss and all of the styling. it renders properly when i run npm run build but npm run dev breaks everything. it's like there is no css.
Level 16
@nasviil Your answer is a bit brief, but I think I see where the confusion might lie:
When you run npm run dev, it starts a development server (usually with tools like Vite, Webpack, or similar) that watches for changes in your files. It recompiles the assets and reloads the browser automatically whenever you save a file. This command needs to stay running in the background while you're actively developing, as it provides real-time updates.
On the other hand, npm run build is a one-time command used for production. It compiles and optimizes your assets for deployment, typically minifying the code and bundling everything into static files. Once the build is complete, it doesn't need to stay running since the output is ready to be served by a production server.
Level 11
What browser do you use?
I had the same issue when I first started using Brave. There you need to disable the Shield by clicking on the brave logo in the address bar and click on the shields switch.
It took me a while before I figured that one out.
1 like
Level 1
@jthijs Thank you!! Brave's "shields are up" was my problem as well. I can't believe I have been messing with other Laravel, Vite, and Herd settings trying to understand why this was happening.
Level 102
Open the console with f12 and check for errors. Most likely you cannot connect to the dev server (docker?)
1 like
Please or to participate in this conversation.