-
-
Notifications
You must be signed in to change notification settings - Fork 6.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Variable-width fonts not resolving during Vite build #15109
Comments
https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts#L1395 Seems to have something to do with this line of code? Because here only match the regular expression, and did not do |
square bracket [ transforming to _ in the output filename is expected behavior as per the source code of rollup. but font url in css file and output filename are same. so it would loads correctly. do you need to preserve that square bracket?
|
@summer-boythink Yes, to make vite/packages/vite/src/node/plugins/css.ts Lines 266 to 276 in 0654d1b
But even will that Vite will still output the file name with |
Thank you for your answer |
I do need to preserve the square bracket. The font is imported within our SCSS framework library, so it's not something I can change easily unfortunately, and the browser also decodes the font URI so the final file is expected to have a square bracket. |
So I tried setting (name: string) => decodeURI(name) but the font files still don't resolve at runtime, and the error message is the same, showing the encoded characters:
I've updated the minimal reproduction to replicate this. |
Describe the bug
I'm currently converting a large web app from create-react-app to Vite. Our SCSS framework uses variable width & weight fonts, which are imported using
url()
in SCSS. We need to provide these fonts as static assets in our project, since our users often use it in environments without an internet connection to fetch webfonts with.The font file names contain square brackets
[
for the weight and width to be injected into. However, using square brackets in the import string results in incorrect font file names in the build output, where the square brackets are replaced with underscores. So, our framework replaces the brackets with percent-encoded characters -%5B
for[
, and%5D
for]
. However, Vite/Rollup does not decode these while building, and the font imports do not resolve.Reproduction
https://stackblitz.com/edit/vitejs-vite-tsnz33?file=style.css
Steps to reproduce
Using the provided link:
npm run build
.woff2
file not resolving at build timestyle.css
, comment out line 6 and uncomment line 7npm run build
System Info
Used Package Manager
yarn
Logs
Unresolved font file output
Resolved font with incorrect name output
Validations
The text was updated successfully, but these errors were encountered: