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

[alexstrand]

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):

and when I yarn dev the path becomes:

In our bud.config.mjs we have:

/**
   * Directory contents to be included in the compilation
   */
  .assets(["images"])

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

  /**
   * Proxy origin (`WP_HOME`)
   */
  .proxy("http://localhost:10008")
  
  /**
   * Development origin
   */
  .serve("http://localhost:10008")

  /**
   * URI of the `public` directory
   */
  .setPublicPath("/wp-content/themes/ericsson-demo/public/")

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.

Thanks,
Alex

[alexstrand]

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"
  },

[strarsis]

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

[Tip] Bud alias (`bud.alias`) in SCSS (SASS)

When using bud.alias with SCSS (SASS) (bud-sass), you can use the alias functions by prefixing them with a tilde sign (~), like so (note: ~@images used in the example is a predefined alias added by @roots/sage): .test { background: url("~@images/background/test.jpg"); } Without that tilde sign (~) the path isn’t correctly interpolated when compiling the SCSS.

[alexstrand]

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