CSS Empty on 404

[toshsan]

Reproduction

Production

Steps to reproduce the bug

We have custom Vite app with backend integration, which imports CSS import "./css/style.scss"; and CSS is loaded from the manifest.json

A catch-all route { path: "/:pathMatch(.)", name: "NotFound", component: NotFound },

When the URL is 404 like: Example, it renders the component.
However CSS does not load for this path.

If you click on any link and go back it retains the style sheet. Not able to reproduce this on dev.

Expected behavior

Work consistently on dev and prod

Actual behavior

CSS does not load for 404 paths.

Additional information

No response

[skirtles-code]

Vue Router doesn't make any distinction between a catch-all route and other routes, they're all just routes. It also isn't directly involved in the loading of the CSS.

Could you elaborate on why you think this is a Vue Router bug? It seems more likely that the problem lies elsewhere, but it's difficult to say for sure without a reproduction.

[toshsan]

I did some digging. When removed vue app.mount from index.ts, the imported css ends up statically in vite manifest.json but not otherwise. The router does not load the css dynamically when it's catch all.

Some additional context: the vite config uses tailwind and cssnano on production. Removing that, did not make any impact. My belief that it could be vite/vue or vite-router related. I will try to isolate this to non proprietary repo until then if anyone experienced this please add some insights.