Yarn dev and css

Trying to understand how assets are delivered because I’m running into a weird inconsistency.

I have 2 different page templates, and two different bud entry points that seem to be configured correctly. Both entry points use it’s own scss.

When I run yarn build and browse the site, both template A and B load the correct, updated styles as css links in the head, as expected.
When I run yarn dev and browse the site, template A loads the most updated styles and updates as i make them. Template B does not load any of the styles at all. Template A does not have a css link in the head, i assume they are somehow being injected into the DOM.

I’m confused as to why it’s happening both ways at the same time with seemingly similar configuration and I’m not sure what else to look for. Any insight would be appreciated.

"@roots/bud": "6.3.3",
"@roots/bud-sass": "^6.3.5",
"@roots/sage": "6.3.3",

Looks like you are loading multiple entrypoints on the same request. See my response here:

Rather than trying to do this in your bud config it is much easier for you to conditionally import the styles based on the DOM:

const main = async () => {
  if (document.querySelector('.page-template-b')) {
    await import('@styles/page-template-b')
  }
}

if (module?.hot) module.hot.accept()

(I don’t think it matters here but you should also make sure all of your @roots/bud- and @roots/sage deps share a common version.)

2 Likes

@kellymears - super helpful, thanks. I was a little premature hitting that solved button though.

Works fine when I run a build, but when running dev I’m getting “chunkLoadError: loading chunk [n] failed”.

const application = async () => {
    if (document.querySelector('.page-template-sales')) {
        await import ('@styles/globals')
    }
}

Globals.scss (.scss make a difference?) is in resources/styles

I’m having a hard time reproducing this (bud@6.5.3):

resources/scripts/app.js:

const main = async () => {
  if (document.querySelector(`.blog`)) await import(`@styles/global`);
};

main();
import.meta.webpackHot?.accept();

resources/styles/global.scss:

$bg: black;

body {
  background-color: $bg;
}

Logs are empty and the sourcemap is confirming I’m loading the desired file:
image

I haven’t tried the version you are on, but the upgrade should be pretty easy-peasy and should hopefully get you sorted.

Awesome!!! I think this is working now! Thanks so much, I really appreciate your help. What if i wanted to add multiple files though, like CSS & JS, in addition a JS dependency? Are you able to do that with this method as well?

here’s a pattern that i like a lot:

resources/scripts/index.js

const main = async () => {
  if (document.querySelector(`.module-a`)) await import(`./module-a`);
};

main();
import.meta.webpackHot?.accept();

resources/scripts/module-a.js

import '@styles/util'
import '@styles/module-a'

document.querySelector(`.module-a h1`)?.classList.add(`bold`)

resources/styles/module-a.scss

.module-a {
  background: hsl(235deg 66% 59%);
}

resources/styles/util.scss

.bold {
  font-weight: bold;
}

Pretty much no limit to what you can do with this pattern and it is makes it pretty easy to grok the entire application by just starting from the entrypoint.

1 Like