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:
opened 08:12PM - 29 Sep 22 UTC
question
### Agreement
- [X] This is not a duplicate of an existing issue
- [X] I have r… ead the [guidelines for Contributing to Roots Projects](https://github.com/roots/.github/blob/master/CONTRIBUTING.md)
- [X] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/) community
### Describe the issue
When using bud-ass + custom entry points + transpiler sources. the HMR does not work for the app.css within the sage theme, but does work when using the scss file in my custom entry point.
Details regarding the transpiler and entry point found in [post #1728](https://github.com/roots/bud/issues/1728)
### Expected Behavior
reload changes regardless of which file is changed
### Actual Behavior
Sometimes nothing, sometimes a console error:
```js
test.js:1567 Uncaught TypeError: Cannot set properties of undefined (setting './node_modules/css-loader/dist/cjs.js??css!./node_modules/postcss-loader/dist/cjs.js??postcss!./resources/styles/app.css')
at self.webpackHotUpdatesage (test.js:1567:39)
at app.1764c00a1e8f430d84d2.hot-update.js:10:29
```
<img width="731" alt="193117442-decbc39f-d6f9-4046-8b8d-b4bdd0a521e9" src="https://user-images.githubusercontent.com/15894740/193132282-13bc6b6d-d64f-46c8-baeb-7c757ee47f6a.png">
### Steps To Reproduce
1. Create a test folder in the root of the teme
2. Add a blank script.js and style.scss to the folder
3. Add the entry points for the test folder into the bud config
4. Add transpiler sources for the js/sass rules
5. run `bun dev` and edit the css/scss files
### version
6.4.4
### What package manager are you using?
npm
### version
8.15.0
### Logs
_No response_
### Configuration
_No response_
### Relevant .budfiles
_No response_
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:
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