How to enqueue additional files in Sage 10

I’m struggling to find documentation that details how I can enqueue additional CSS or JS files when using Sage 10. Does such a page exist? If so can someone provide me with a link or some basic instructions on how to do so.

Thanks

It should be sufficient to use the core WordPress hooks and Sage methods in the setup.php:

add_action('wp_enqueue_scripts', function () {
    if (is_tax('some-taxonomy')) { // example condition
        bundle('forSomeTaxonomy')->enqueue();
    }
}, 100);

The bundles (entrypoints) can be retrieved by using bundle('...') and enqueued using enqueue() on it.

Thanks for the response.

I eventually figured that much out but I still can’t figure out how to pass an array of dependencies for a script or stylesheet. Do you know how that’s done the Sage10 way?

You can specify the entrypoint/bundle dependencies using dependOn:

I’ve been playing around with that but can’t make it work. I have two self hosted CSS files. One is dependent on the other.

In setup.php

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

cssfile2 is a dependency for cssfile1 so I want cssfile2 to load first.

In bud.config.mjs:

app.entry({      
  cssfile2: ["@styles/cssfile2"],
  cssfile1: {
    import: ["@styles/cssfile1"],
    dependOn: ['cssfile2'],
  },
  editor: ["@scripts/editor", "@styles/editor"],
})

Yet when I build the project and view source I can see cssfile1 is loaded before cssfile2.

The only way I can make it work is to swap the order of bundle(‘cssfile1’)->enqueue() and bundle(‘cssfile2’)->enqueue();

Is dependOn only for external files?

The dependencies should be found in the dependencies key of the bundle in public/entrypoints.js.

"dependencies": []

It’s showing as empty. It doesn’t seem to be working as expected. :frowning: