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

**URL:** https://discourse.roots.io/t/roots-bud-sass-incorrect-url-paths-when-using-yarn-dev-fonts-images/24621
**Category:** bud
**Tags:** sage10
**Created:** 2023-01-23T09:29:45Z
**Posts:** 4

## Post 1 by @alexstrand — 2023-01-23T09:29:45Z

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](https://discourse.roots.io/uploads/default/original/2X/0/0ea8bc14fbc9f2581f5f4bce37d9466a7e621cb7.png)

and when I yarn dev the path becomes:  
 ![Screenshot 2023-01-23 at 10.27.41](https://discourse.roots.io/uploads/default/original/2X/c/c2e54a217334168ea1a6c44699899be301796365.png)

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

---

## Post 2 by @alexstrand — 2023-01-23T09:59:27Z

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

---

## Post 3 by @strarsis — 2023-01-23T12:10:36Z

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

> [@[Tip] Bud alias (`bud.alias`) in SCSS (SASS)](https://discourse.roots.io/t/tip-bud-alias-bud-alias-in-scss-sass/24208):
>
> When using [bud.alias](https://bud.js.org/docs/bud.alias/) with SCSS (SASS) ([bud-sass](https://bud.js.org/extensions/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](https://bud.js.org/docs/bud.alias/#rootssage)): .test { background: url("~@images/background/test.jpg"); } Without that tilde sign (~) the path isn’t correctly interpolated when compiling the SCSS.

---

## Post 4 by @alexstrand — 2023-01-23T13:42:53Z

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