[bug] Image url not being processed correctly

Agreement

[X] This is not a duplicate of an existing issue
[X] I have read the guidelines for Contributing to Roots Projects
[X] This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

What's wrong?

So I have this scss file located at ./resources/styles/components/_button.scss Within this file I am linking to an image like so: url('~@images/svg/arrow-blue.svg') < I also tried it without the ~@ and only with ~. The image is located at ./resources/images/svg.

After building the assets, the chrome console shows the stylesheet is trying to load an url pointing to just 'website.dev/images/arrow-blue.svg'.

I already set the public path in the config. My config is below.

What have you tried?

I have tried changing the bud config, but with no result.

What insights have you gained?

None, after hopelessly going trough a lot of sites.

Possible solutions

I hope to get one.

Temporary workarounds

None.

Expected Behavior

That it loads the correct image path.

Actual Behavior

Links to a wrong path.

Steps To Reproduce

Install bedrock with sage starter theme, configure bud, create and at a folder at resources/images/svg/image.svg then try to load it within a stylesheet located in a sub directory with resources/styles.

version

6.6.2

What package manager are you using?

yarn classic

version

1.22.17

Logs

No response

Configuration

// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

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

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

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("https://flow.test")

    /**
     * Development origin
     */
    .serve("https://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/sage-boilerplate/public/")

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
    .settings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .enable()
};

Relevant .budfiles

No response

roots / bud