-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
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
🐛 BUG: css url()
replaced by __VITE_ASSET__*
#2146
Comments
Just experienced this as well. Build doesn't include the font file, dev works fine. |
Confirmed. It works fine in dev, but the build is incorrect. @font-face{
font-family: "FA";
font-style:normal;
font-weight:300;
font-display:swap;
src: url(__VITE_ASSET__2adefcbc__) format("woff2");
} |
Aliases and public paths also doesn't resolve |
Same for me. I imported font from fontsource. Build folder contains imported font files but the names of them are replaced by VITE_ASSET__hash inside of css. The hash is right but the name of the asset is missing in the css. Code
ResultBuild folder: CSS: |
Similar issue in vite repo: vitejs/vite#1602 |
This issue is still present for me. Using Astro v0.22.9. |
just checked, the fix is present |
Till the original issue gets solved, I have created a post-build script to replace the EDIT: updated the script URL |
From further findings, this issue should have been be fixed by vitejs/vite#5729 |
This looks like a duplicate of #2453. Hoping the upstream PR that @matthewp made in Vite will fix this too. Also thanks for that script @obnoxiousnerd I can confirm that it worked perfectly. |
Any update on this issue |
I'm also having this issue. Would be great to get an update if this is being fixed |
@Abhi13027 @marianheinsen Looks like the upstream issue in Vite (vitejs/vite#6625) is still open so I think we're waiting for a response. In the meantime feel free to use the workaround I posted above in this thread 🙂. |
How to run the script after normal build? |
@schlichtanders You can run the script by executing the command |
I'm looking into this one now again. |
Update here: I was able to get this problem to be fixed in this branch: https://github.com/withastro/astro/tree/fix-vite-asset However, to fix it we need to essentially hand-over CSS bundling to the Vite CSS plugin. One constraint of Astro is that we want each page to generate its own CSS file (not be bundled all together). To do that we need to turn pages into dynamic imports, which the Vite CSS plugin will then split. However, this also means that each page becomes its own chunk in the SSR build. We wanted to have a single JS file for SSR because we were under the impression that some hosts, like Cloudflare, required that. We need to confirm if this is the case. If that is the case it's back to the drawing board. If not and dynamic imports are ok we can go with the approach prototyped in that branch. cc @FredKSchott |
Ah dang, that's annoying. I'd really like to avoid the dynamic From quickly reading the Vite docs, it sounds like we'll need to somehow define these chunks ourselves. https://vitejs.dev/guide/build.html#chunking-strategy. Asking the Vite team for guidance on this may also be a good idea. @matthewp this is probably worth punting on until next cycle, where we could dedicate some dedicated time to solving this PLUS tackling/auditing/finalizing the overall Astro output performance story, all together. |
The latest comment above is still relevant here. To summarize:
|
Related notes:
|
Are we sure this is fixed? If I import "@fontsource/montserrat" in my
This can be reproduced in the minimal example in the Astro repo (beta 40) by adding the font and trying to import it, or just use my Gitpod |
@andrioid same here; tried using |
Bah! Was really looking forward to this one. Pinging @matthewp to take a look at this (fontsource would be a good package to get a specific test for, since it will most likely be our recommended "good perf google fonts" workflow) |
As a work-around, it’s possible to do a Thanks to Fred, for mentioning it on Discord. |
Can you create a stackblitz? I can't access your gitpod. Are you importing within CSS or in the frontmatter? This issue is about importing within css (in a style tag should work). |
Sorry, I missed that this was from within CSS. The symptoms matched. I'm importing the font inside Here's a Stack "Blitz": https://stackblitz.com/github/wmailambn?file=src/pages/index.astro
|
@andrioid I still can't access that, strangely. You sure you don't have that marked as private? This specific issue is where some |
No |
@andrioid That stackblitz probably works, I just can't access it for some reason :( |
Was able to recreated, it's not a |
What version of
astro
are you using?0.21.11
What package manager are you using?
npm
What operating system are you using?
Linux on WSL2 (Ubuntu 20.04.3 LTS)
Describe the Bug
When adding a font from a npm package the font file url in the build is replaced by
__VITE_ASSET__2adefcbc__
See the linked example. When adding a
@font-face
definition inglobal.css
the result in the build is mangled. For the example I could not get the font to actually show on theastro dev
page. But in my project (which I cannot share) everything works withastro dev
but building does not. (In the example the actual font file is not copied to the build dir. This does happen in my project)Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-eehb2a-fggvjv?devtoolsheight=33&file=dist/assets/index.4daba237.css
The text was updated successfully, but these errors were encountered: