Description
Astro Info
Astro v5.3.0
Node v22.13.0
System Windows (x64)
Package Manager npm
Output static
Adapter none
Integrations none
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
url() links in CSS are properly resolved when using a resolve alias, but href attributes in preload <link> tags are not.
I've configured an alias in astro.config.mjs like so:
import { defineConfig } from 'astro/config'
import path from 'node:path'
// https://astro.build/config
export default defineConfig({
vite: {
resolve: {
alias: {
'@': path.resolve('src'),
},
},
},
})My src/pages/index.astro file looks like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astro</title>
<link
rel="preload"
href="@/fonts/brown-sugar.woff2"
as="font"
crossorigin
/>
</head>
<body>
<main>
<h1>Welcome to Astro!</h1>
</main>
</body>
</html>
<style>
@font-face {
font-display: swap;
font-family: 'Brown Sugar';
font-style: normal;
font-weight: 400;
src: url('@/fonts/brown-sugar.woff2') format('woff2');
}
h1 {
font-family: 'Brown Sugar', sans-serif;
}
</style>The line src: url('@/fonts/brown-sugar.woff2') format('woff2'); in the CSS becomes src:url(/_astro/brown-sugar.CpHNq7Q4.woff2) format("woff2") in the build output, which is correct, but the line href="@/fonts/brown-sugar.woff2" in the HTML is left as-is.
I assumed this was related to this issue but this comment states that this pr should fix it, but that PR is closed and I'm still having this issue.
What's the expected result?
The href attribute of preload <link> tags should be resolved correctly.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-cnsqc5x8?file=src%2Fpages%2Findex.astro
Participation
- I am willing to submit a pull request for this issue.