enqueueCss doesn't work for yarn dev (but it does for yarn build)

sage
, ,
1

I have an extra css set up (without js) for woocommerce (woocommerce.css).
In bud.config

    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
      woocommerce: ["@styles/woocommerce"],
    })

Then, in setup.php:

add_action('wp_enqueue_scripts', function () {
    bundle('app')->enqueue();

    if (is_account_page() || is_cart() || is_checkout()) {
        bundle('woocommerce')->enqueueCss();
    }
}, 100);

If I use enqueue() it works apparently but generates a reload on Chrome because no woocommerce.js was found and thus loading the same app.js twice. If I use enqueueCss() it doesn’t work while yarn dev but it does work when yarn build.

I guess there is a bug in acorn and another one in bud.

2

You should consider refactoring your setup based on this comment about bundles from @kellymears

1 Like
3

Probably it was an old bug. I ran composer update and updated bud too and now using enqueue() without caring if there is a js file or not works.

I was on Sage 10.2, updated to 10.3.1

4

FWIW I also had this issue previously but at some point this year the original bug seems to have been fixed because I can now use enqueueCss() without any issues locally. Now if I use enqueue() for bundles that don’t also have a JS file it breaks hot reloading locally. This makes sense, though, and isn’t a problem for me now that enqueueCss() is working.

5

enqueueCss() stopped working again for me locally. Anyone else have this issue? I’m using Bud 6.17.0 and Node 20.9.0.

6

I was able to fix it by switching back to enqueue() and adding bud.runtime('single') to my config. I previously had bud.runtime(false).