How to enqueue additional files in Sage 10

sage
,
1

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

2

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.

3

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?

4

You can specify the entrypoint/bundle dependencies using dependOn:

5

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?

6

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

7 
"dependencies": []

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

8

I’m seeing the same thing. I use dependOn in my entry, but the dependences array is empty. The result is that the dependencies don’t get included in the bundle.

Here is my setup. The goal is to add an additional script to a single page called “payment,” while including the app.js and app.js global stuff.

in bud.config:

    .entry('app', ['@scripts/app', '@styles/app'])
    .entry({
      payment: {
        import: ['@scripts/payment'],
        dependOn: ['app'],
      },
    })
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

Conditionally enqueue the bundle:

add_action('wp_enqueue_scripts', function () {
    bundle( is_page( 'payment' ) ? 'payment' : 'app' )->enqueue();
}, 100);

And here is entrypoints.json:

{
  "app": {
    "js": [
      "js/runtime.c039ed.js",
      "js/app.3b5e24.js"
    ],
    "css": [
      "css/app.f571d1.css"
    ],
    "dependencies": []
  },
  "payment": {
    "js": [
      "js/payment.aded86.js"
    ],
    "dependencies": []
  },
  "editor": {
    "js": [
      "js/runtime.c039ed.js",
      "js/editor.c86a86.js"
    ],
    "css": [
      "css/editor.c3d530.css"
    ],
    "dependencies": [
      "wp-data",
      "wp-hooks"
    ]
  }
}

On all other pages, app.js and app.css are enqueued properly. However, on the “payment” page, the only thing that gets enqueued is payment.js. Styles are missing, and so is the global app.js.

Creating an entry without dependOn works if I relist all of the scripts and CSS (I think the docs show this), but the result is that it creates a payment.css that is identical to app.css.

I think the issue is the missing dependencies in entrypoints.json, but I’m not sure how to correct it.

9

You’re really only supposed to be using a single entrypoint per page

See this older discussion