-
-
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
Force direct linking with explicit ?url
import
#12385
Comments
Start a new pull request in StackBlitz Codeflow. |
Small addendum: When The unchanged one is linked to via the That means, the actual bug is, that the CSS file referenced via |
See vitejs/vite#12385 for the concrete problem. We bypass it by loading the main CSS file in any component that needs global styles.
Describe the bug
I encountered a problem with a discrepancy between the
dev
andbuild
states of my app with regards to linking to stylesheets from within JS. Use case: Using style sheet URLs inside web components to link to shared styles.The problem is the conversion to a
data:
URI for a small stylesheet in this case:With
small.css
being under the threshold ofassetsInlineLimit
it will be included as adata:
URI. However, without any additional tooling,very_large.css
will not be present in the final build. This leads to a reference error.In my concrete case I handle the CSS import with postcss-import and mention
small.css
explicitly invite.config.js
. However, this file will not get picked up because of thedata:
URI conversion that is not aware of the finalsmall.css
being actually quite large.My suggested solution is: Ignore
assetsInlineLimit
if the?url
specifier is set for a given import, or introduce a new specifier that allows for this behaviour.Reproduction
https://stackblitz.com/edit/vitejs-vite-qdaqvk?file=small.css,referenced.css,main.js&terminal=dev
Steps to reproduce
No response
System Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: