bridge
bridge copied to clipboard
nuxt
css styles not applied after building
Environment
- Operating System:
Windows_NT - Node Version:
v16.17.0 - Nuxt Version:
2.16.0-27720022.54e852f - Nitro Version:
0.5.4 - Package Manager:
[email protected] - Builder:
vite - User Config:
bridge,vite,css,plugins,components,buildModules,modules,pwa,build,serverHandlers,devServerHandlers - Runtime Modules:
- - Build Modules:
(),@nuxt/[email protected]
Reproduction
https://stackblitz.com/edit/nuxt-starter-y8k5hw?file=nuxt.config.js
Describe the bug
in dev mode, all styles from nuxt.config.js > css applied as well.
after building the project, css files not loaded.
Additional context
this bug appears after 3.0.0-27736739.990b28d version released.
Logs
No response
The manifest at .output/server/chunks/app/client.manifest.mjs is not generated correctly, there is no css under entry-legacy.xxx.js entry.
This is in turn caused by .nuxt/dist/client/manifest.json not including css under .nuxt/client-legacy.js entry.
FWIW, I managed to fix the problem by the following pnpm patch patches/[email protected]:
diff --git a/dist/node/chunks/dep-4da11a5e.js b/dist/node/chunks/dep-4da11a5e.js
index ef2d5d810506e20169239232d9972f1adf9bcdd8..114693e1473f068b95f016efa096ddf992521413 100644
--- a/dist/node/chunks/dep-4da11a5e.js
+++ b/dist/node/chunks/dep-4da11a5e.js
@@ -44284,7 +44284,7 @@ function cssPostPlugin(config) {
// this is a shared CSS-only chunk that is empty.
pureCssChunks.add(chunk.fileName);
}
- if (opts.format === 'es' || opts.format === 'cjs') {
+ if (opts.format === 'es' || opts.format === 'cjs' || opts.format === 'system') {
const cssAssetName = chunk.facadeModuleId
? normalizePath$3(path$n.relative(config.root, chunk.facadeModuleId))
: chunk.name;
With that, @vite/plugin-legacy starts injecting CSS into legacy chunks, which then makes its way into Nuxt/Nitro SSR bundle. I am not sure if that is a valid approach at all - it just happens to work.
If someone has time to come up with a minimal reproduction repo, please open an upstream issue.
I suspect the actual fix would be serving modern format scripts in addition to legacy (#15), and pull css information from modern format chunks.
Note that upgrading vite to 3.2.x makes it work (thanks to https://github.com/vitejs/vite/pull/10496), however it leads to FOUC because styles are inlined rather than injected via <link rel="stylesheet">. The patch above delivers better result.