craft-vite icon indicating copy to clipboard operation
craft-vite copied to clipboard

Can't get CSS to be included synchronously

Open FrDH opened this issue 1 year ago • 4 comments

Question

We're not using critical CSS (maybe some day) and want the CSS to be loaded synchronously, but for some reason setting the 2nd argument to false does not work:

{{ craft.vite.script("src/js/app.ts", false) }}

There is about 2 second FOUC every time I navigate to a new page, which is really annoying for one, but also completely destroys all (the possibility to test) view-transitions. For now, I resigned to including the CSS in a style tag before including the JS (in local environment only)

{% if craft.app.env == 'local' %}
	<link rel="stylesheet" href="{{ craft.vite.asset('src/scss/app.scss') }}">
{% endif %}
{{ craft.vite.script("src/ts/app.ts", false) }}

Any thoughts?

FrDH avatar Oct 22 '24 12:10 FrDH

You're seeing the FOUC only in local development when using the dev server ya?

khalwat avatar Oct 23 '24 20:10 khalwat

Yes, there is no FOUC if the dev server isn't running

FrDH avatar Oct 25 '24 09:10 FrDH