css files don't load instantly on pageload

[Jorckx]

When I'm in dev mode the styles don't load instantly on page visit. It seems that the page always glitches on every page refresh.

I'm not sure how to fix it since i'm new in the world of Vite.

Also I figured that the global styles ar not loaded, while the template-specific are loaded correctly. for context, I installed Postcss for handling my src folder. Or Has this something to do with how css modules work (also new in that area).

[arnoson]

The css files are injected by vite via javascript in dev mode. This causes the glitch on refresh. It is a bit annoying but as soon as you're in production mode the css files are loaded instantly via a classic link tag. So there is not much that kirby-vite can do about it. Vite is mostly used for SPAs so typically there aren't a lot of page refreshes. Another option would be to use laravel mix instead (it loads css files instantly even in dev mode). But I think all the pros of vite still make it a good choice for traditional multi page websites if you can live with the glitches in dev mode.

I just tested global styles with this multi-page-kit. For me everything works and the global src/index.css is loaded for all sub pages. Could you share an example demonstrating your problem on github?

[Jorckx]

Thanks already for the quick response! It seems like the files that consist my styles load a bit slower. Also when I run the build script it's still the same in dev mode. Or do you mean that it will be faster once i deploy it to a server?

[arnoson]

You're welcome!

The css files load a bit slower because they are injected via javascript (you can see the initiator in your screenshot for both css files was javascript code index.js). This is the way vite works in dev mode.

To get a preview of how your site will load in production mode you have to run the build script and than start the server (don't run dev again until you finished).

This how the production loading of a site would look like. The styles are loaded instantly and the initiator is your html document (index).

To avoid confusion I might add a new npm script to the starter kit, something like

{
  "preview": "npm run build && npm run server"
}

[Jorckx]

Thanks for the great help! Now it all makes sense :) I've already setup the preview script myself, works like charm!