Preload CSS file compiled by Bud?

sage
1

How do we reference/preload a CSS file? Is @asset not the correct directive for this?

While the following method would work for preloading a public image asset, it doesn’t work when preloading a public hashed file.

<link rel="preload" href="@asset('fonts/fonts.css')" as="style">

BTW, I already have this configured, and it’s compiling correctly, with the hashed font file returned to the HTML.

In setup.php

add_action('wp_enqueue_scripts', function () {
    bundle('fonts')->enqueue();
}, 100);

In bud.js

  app
    .entry('fonts', ['@styles/fonts/fonts'])
2

Is there a reason why you’re making a separate bundle just for your fonts?

I’d suggest using the main app bundle and following How to Setup Fonts | Sage Docs | Roots

As far as preloading fonts goes, https://gist.github.com/joshuafredrickson/aa416f7cb4e02cbec8c5a1e554e3dfee from @joshf is a good example

1 Like
3

Much appreciated @ben.

I’m just migrating over a theme and that’s how it was originally set up.

Regardless, is there a way to reference hashed files besides images?

4

@asset will return the versioned filenames if you’ve ran yarn build. It will not return the hashed filenames unless the manifest has been generated with them.

I’m just migrating over a theme and that’s how it was originally set up.

Just beware that it’s not advised to include multiple bundles on a page — one entrypoint per page is the intended setup :eyes:

5

log1x/laravel-webfonts works with Bud for preloading fonts if you’re on Acorn v4.

3 Likes
7

Thats dynamite! Thanks