Closed
Description
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
- Create an alias to an SVG sprite.
- Reference one of the SVG sprites using that alias in CSS, example:
background: url('my.svg#some-image')
- Import should be resolved using the defined alias
When using reproduction link:
- Inspect the first block (
#fragment
) - Remove the fragment from the source code (
#test
) - Notice how the background URL changes from
url(fragment.svg#test)
tourl('/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
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.