@roots/bud-sass: Incorrect URL paths when using 'yarn dev' (fonts & images)

Hi everyone!

I am new to the forums and Roots/Sage in general, so my apologies if this has been brought up previously.

"devDependencies": {
    "@roots/bud": "^6.4.5",
    "@roots/bud-tailwindcss": "6.4.5",
    "@roots/sage": "^6.4.5"
  "dependencies": {
    "@roots/bud-sass": "6.4.5",
    "aos": "^2.3.4",
    "popups": "^1.1.3",
    "slick-carousel": "^1.8.1"

My colleague and I are having trouble when trying to run yarn dev. Doing so seems to break all URL paths for fonts and images that are using the “url();”

Example: background-image: url(‘…/images/arrow-right.png’)

When I yarn build, the image pathway is (correct path):
Screenshot 2023-01-23 at 10.27.25

and when I yarn dev the path becomes:
Screenshot 2023-01-23 at 10.27.41

In our bud.config.mjs we have:

   * Directory contents to be included in the compilation

   * Matched files trigger a page reload when modified
  .watch(["resources/views/**/*", "app/**/*"])

   * Proxy origin (`WP_HOME`)
   * Development origin

   * URI of the `public` directory

I am not sure if this is related, but when I run yarn dev, I also receive the following warning:

[bud@6.4.5] [sage] › ⚠  warning   None of the requested ports could be resolved. 
 A port was automatically selected: 51531

Sorry for the mess of information, just feeling a bit lost and not sure how to resolve this.


Hi again,

We were able to resolve the issue by upgrading the following packages to 6.6.10:

"devDependencies": {
    "@roots/bud": "^6.6.10",
    "@roots/bud-sass": "^6.6.10",
    "@roots/bud-tailwindcss": "^6.6.10",
    "@roots/sage": "^6.6.10"
1 Like

It is probably easier and more robust to use bud aliases instead of file-relative paths:


Thanks, I’ll take a look at this. I am new to most of this and appreciate the help :slight_smile: