Nested font imports 404ing in Vite 2.7.x when a server.origin is set

[mitchell-ionata]

Describe the bug

I am currently experiencing this with Font Awesome, but I imagine it would be an issue in many other cases as well. I am using Font Awesome as a dependency and if I import their compiled css into my main.js, the styles are imported fine but the references to the font files inside the CSS produce a 404 in Vite v2.7.x but it works fine in v2.6.14.

If I set my server.origin in my vite.config.js to http://localhost:3000/ for example, the generated link to a font file will look something like the following: http://localhost:3000//node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2
In v2.6.14 the link looks the same, but does not produce a 404.

Reproduction

https://stackblitz.com/edit/vitejs-vite-ajzary?file=main.js

System Info

N/A

Used Package Manager

npm

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 https://github.com/vuejs/vue-next 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.

[toSayNothing]

vite/packages/vite/src/node/plugins/css.ts

Lines 218 to 222 in e7f491e

	: await moduleGraph.ensureEntryFromUrl(
	(
	await fileToUrl(file, config, this)
	).replace((config.server?.origin ?? '') + config.base, '/')
	)

in your case, change origin to http://localhost:3000 (without slash) works.

[mitchell-ionata]

Ah thank you! The docs say to include the trailing slash so it didn't occur to me to remove it. https://vitejs.dev/config/#server-origin