How to preload stylesheet in development mode?

[priosshrsth]

With vite, it seems all styles are added as inline css after the chunk is loaded. Is there any way, I could preload some stylesheets? What I want is to display a loader until the page is completely loaded. I am trying to use bootstrap 4's progress bar. I'm using https://github.com/ElMassimo/jumpstart-vite to create the project.

[ElMassimo]

Hi Prios!

This could be related to #48, in the sense that Vite will only inject CSS that way during development, but in production the stylesheet would be preloaded instead.

You could try shutting down the Vite development server temporarily while developing the progress bar feature. This will cause assets to be compiled and to load as the would in production, the only downside is that it would rebuild every time you change assets.

Another option would be to use vite_stylesheet_tag to render a link tag instead, and create a separate stylesheet that contains the styles you need for the progress bar.

[priosshrsth]

@ElMassimo First of all, thanks for your awesome work.

In my case, I worked around the issue by adding new entrypoint with only bootstrap css import statement which I preloaded first and then including other entrypoints in layout file. It seems to work now.

Another option would be to use vite_stylesheet_tag to render a link tag instead, and create a separate stylesheet that contains the styles you need for the progress bar.

How do I achieve this? It seems all css path return 404 in development mode.

[ElMassimo]

Nice!

Using vite_stylesheet_tag as in this example will render a link tag to your stylesheet (the example uses Sass, but you don't have to).

Vite will resolve any @import statement in stylesheets, so you should be able to import styles from Bootstrap there as well. If your current approach works, there shouldn't be much of a difference once assets are compiled (no need to switch).

[priosshrsth]

Oh yeah. I didn't know I could add the styles as entrypoints. Thanks. this is what I wanted. I went through your example. It helped me a lot. Thanks.