All styles from layouts and pages being loaded in dev mode – Nuxt 3

[ashleynolan]

Versions

• nuxt: [email protected]
• node: 14.17.0

Reproduction

In short, the issue is that CSS from different pages & layouts is included on all pages, resulting in pages being styled incorrectly. This only happens in dev mode in Nuxt 3 – when building for prod, the CSS is included as expected.

I've set up a repo that shows the issue (and goes through the expected and actual behaviour).

A similar issue was reported for Nuxt 2, where one of the team said that the issue would be looked at for Nuxt 3 – which is why I set up this test repo, as we're seeing this issue on our project.

Steps to reproduce

• Check out this repo
• Go to the nuxt3-app folder in command line, install dependencies (yarn) and run yarn dev to reproduce the issue.
• The test site has 4 pages – /, /search, /menu and /checkout – and the expected/actual results are documented in the README of the repo.

What is Expected?

When rendering a page, styles from irrelevant layouts and other pages do not also load on the page.

What is actually happening?

Currently, in dev mode, it looks like all styles from all layouts and pages are included in the head of each page, resulting in issues with the page displaying styles that aren't intended for the current page.

[kosmeln]

We stumbled upon the very same issue. It really looks like a blocker for development team. Can anybody provide an actual status update on this? Or a temp workaround till the fix is in place? Thank you!

[stale[bot]]

Thanks for your contribution to Nuxt! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[ashleynolan]

Can confirm that this issue is still happening. Would be good to hear if this will be mitigated at some point?

[kosmeln]

Same here - It'd be nice to get a status update on this one. Thanks!

[phillipmohr]

I noticed the issue after building my project as well, using Nuxt 3 RC6. I have 2 different layouts and each of them imports specific CSS.

layouts/default.vue

<style lang="scss">
    @import '~/assets/scss/main.scss';
</style>

layouts/admin.vue

<style lang="scss">
    @import '@/assets/scss/admin/main.scss';
</style>

Both CSS files get imported on a public route, which only uses the default layout.