All styles from layouts and pages being loaded in dev mode

ashleynolan commented 2 years ago

Versions

nuxt: nuxt3@3.0.0-27276275.abfbd2f
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 commented 2 years ago

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] commented 2 years ago

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:

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

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

ashleynolan commented 2 years ago

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

kosmeln commented 2 years ago

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

phillipmohr commented 2 years ago

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.

theguriev commented 1 year ago

Hey guys 👋

I have the same thing going on. Is there any answer to this problem?

theguriev commented 1 year ago

btw on 3.0.0-rc.11 it happens even after prod build

manniL commented 1 year ago

@danielroe Should we transfer this issue to the https://github.com/nuxt/framework repo?

theguriev commented 1 year ago

Good point 👍🏻

On Sat, 8 Oct 2022 at 16:19, Alexander Lichter @.***> wrote:

@danielroe https://github.com/danielroe Should we transfer this issue to the https://github.com/nuxt/framework repo?

— Reply to this email directly, view it on GitHub https://github.com/nuxt/nuxt.js/issues/12919, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACA3WBOOYWQOFTY2J43QUXDWCFYE7ANCNFSM5I63GHLA . You are receiving this because you commented.Message ID: <nuxt/nuxt. @.***>

theguriev commented 1 year ago

@ashleynolan Did you find any workaround?

jevgenigavrilov commented 1 year ago

I am also interested if there is any workaround to this. Have the same issue in my app

ashleynolan commented 1 year ago

I haven't managed to find a workaround for this yet – I haven't tested with the latest Nuxt 3 release, so will try and update when I get chance, but as far as I'm aware the same issue is present

theguriev commented 1 year ago

@ashleynolan Yep. I just checked. Looks like the issue is still there. :(

matthew-dean commented 1 year ago

Not sure why this is marked as completed? This was never completed for Nuxt 3, and remains an issue. See: https://github.com/nuxt/nuxt/issues/3877

matiaslauriti commented 4 weeks ago

This is still happening, I am not sure what to do as it is messing with some stuff, not nice 😢

danielroe commented 4 weeks ago

If you are experiencing something you think is a bug, please open an issue with a minimal reproduction. 🙏

matiaslauriti commented 3 weeks ago

If you are experiencing something you think is a bug, please open an issue with a minimal reproduction. 🙏

To be honest, it is exactly the same issue, it is still happening 😅 with latest versions from yesterday, but I guess I will have to open a new ticket 😅

danielroe commented 3 weeks ago

Thank you. Although it might seem the exact same bug, it is rather a newer regression and should be tracked separately.

nuxt / nuxt