Skip to content

Aliases are not resolved for CSS URLs with fragments #17690

Closed
@CyberAP

Description

@CyberAP

Describe the bug

If you use URL fragments (url('foo#bar')) inside CSS they will not be resolved using aliases from Vite config.

Reproduction

https://stackblitz.com/edit/vitejs-vite-k7ay22?file=style.css

Steps to reproduce

  1. Create an alias to an SVG sprite.
  2. Reference one of the SVG sprites using that alias in CSS, example: background: url('my.svg#some-image')
  3. Import should be resolved using the defined alias

When using reproduction link:

  1. Inspect the first block (#fragment)
  2. Remove the fragment from the source code (#test)
  3. Notice how the background URL changes from url(fragment.svg#test) to url('/folder/fragment.svg')

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 163.20 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
    Yarn: 1.22.19 - ~/.asdf/shims/yarn
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 126.0.6478.127
    Chrome Canary: 128.0.6598.0
    Firefox: 127.0
    Safari: 17.5
    Safari Technology Preview: 18.0
  npmPackages:
    @vitejs/plugin-vue2: ^2.3.1 => 2.3.1 
    vite: ^5.3.3 => 5.3.3

Used Package Manager

yarn

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions