[Feature Request/BUG] Does not work if vite project does not use a .html file

[ThaDaVos]

I checked the code and it seems you're dependent on the transformIndexHtml hook - sadly this hook doesn't seem to be fired when one is using vite in a project without a .html index file - for example a Laravel 9 project using Vite (as it's the standard now).

Maybe it should be configurable which hook it uses? Or maybe use a different hook to generate the CSS file (if possible) and later stitch it together with the HTML file?

As of right now, this project doesn't seem usable in projects which don't use a index.html file as the transformIndexHtml seems to be never called

[ThaDaVos]

I tricked it by now, by creating an empty .html file and configuring it to use it - preferably I would not use an html file in a PHP based project

[ThaDaVos]

Discard the above, generation of the webfonts.css file is working with above solution... but it breaks the other generations as these will then depend on the .html file...

[ThaDaVos]

Got it working with a little monkey patching - it generates it for me without an html file input:

[posporus]

Same here. Tried to use it along with vite-plugin-ssr which doesn't use an html file.

[ThaDaVos]

My patch works for production builds, sadly it doesn't work for dev builds with hot reload - so I hope it can be fixed in the package

[jasikpark]

Same effect while trying to use this in concert with a https://github.com/withastro/astro site

[0xb4lint]

Thanks you guys for creating this issue!

I've just released 3.3.0-beta.0. Moved the webfonts.css generation from transformIndexHtml to generateBundle hook.

Could you please try it and get back to me?

[ThaDaVos]

During a build it's now generated, sadly not loaded by default (I am using Laravel Vite) and can't figure out how to get it loaded - it's not triggered by the main css file or by the .js entry file

Also, during dev server it still seems not to be generated - at least, it's not requesting it

[ThaDaVos]

I got the loading fixed by <link rel="stylesheet" href="{{ vite()->getAssetUrl('webfonts.css') }}" /> - as it's no entry point and not triggered by default

[ThaDaVos]

Dev Server throws 404:

[0xb4lint]

@ThaDaVos Could you please try again with v3.3.0-beta.1?

Please include @vite('webfonts.css') to your blade file.

[ThaDaVos]

I'll try tomorrow!

About the vite directive, your talking about Laravel's version, but I'm using the official version from https://laravel-vite.dev as I needed the version helper (because I use inertia and it kept reloading the page)

[0xb4lint]

Thank you!

I used the very official Laravel Vite plugin (laravel-vite-plugin) from Laravel Docs.

Steps to make it work:

1. composer create-project laravel/laravel laravel-vite-webfont-dl
2. cd laravel-vite-webfont-dl
3. npm i vite-plugin-webfont-dl@3.3.0-beta.1 -D
4. add viteWebfontDownload to vite.config.ts (with some font)
5. add @vite('webfonts.css') to resources/views/welcome.blade.php
6. set font-family on body
7. npm run dev ✅
8. npm run build ✅

[0xb4lint]

I've just released v3.3.0 to fix this issue.