You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If I have entry points with styles (e.g. Vue components) and also async styles (e.g. async Vue component),
and I set build.cssCodeSplit: false then vite will not correctly extract the CSS.
For the async import the styles are loaded using module preload correctly. But for the entry points with static imports no CSS entry point is created, so I do not know which CSS file I need to add to my application.
Expected behavior:
Either duplicate the styles in entry-point-name.css for the styles synchronously used by that entry point
Or create a entry-point-name.css with @import for the css chunks used synchronously by that entry point
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 vuejs/core instead.
I currently working on a workaround, but it is very unexpected that vite only can handle this with HTML input and not with JS input (meaning you currently have to guess which CSS to use with your JS entry).
Describe the bug
I am using vite with JavaScript entry point.
If I have entry points with styles (e.g. Vue components) and also async styles (e.g. async Vue component),
and I set
build.cssCodeSplit: false
then vite will not correctly extract the CSS.For the async import the styles are loaded using module preload correctly.
But for the entry points with static imports no CSS entry point is created, so I do not know which CSS file I need to add to my application.
Expected behavior:
entry-point-name.css
for the styles synchronously used by that entry pointentry-point-name.css
with@import
for the css chunks used synchronously by that entry pointReproduction
https://stackblitz.com/edit/vitejs-vite-bagjfe?file=vite.config.js
Steps to reproduce
npm ci && npx vite build
main.css
nor asecond.css
but just some "randomly" named assets¹¹ For bigger projects this might contain a lot of css assets with random names.
System Info
Does not matter, but: System: OS: Linux 5.0 undefined CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 0 Bytes / 0 Bytes Shell: 1.0 - /bin/jsh Binaries: Node: 18.20.3 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.2.3 - /usr/local/bin/npm pnpm: 8.15.6 - /usr/local/bin/pnpm npmPackages: vite: ^5.3.1 => 5.3.1
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: