\r\n\r\n\r\nHowever, in production build, the style works. But the css link is added asynchronously, so there is no style on first render causing the page to blink.\r\n\u003Cimg width=\"699\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/1401172/628cf01e-b84e-43d7-af43-f8c691396e24\">\r\n\r\n",[2922],{"name":2868,"color":2869},26696,"Nuxt 3.11 with webpack builder lose style in SFC","2024-06-30T11:04:41Z","https://github.com/nuxt/nuxt/issues/26696",0.6602303,{"description":2929,"labels":2930,"number":2935,"owner":2871,"repository":2871,"state":2936,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### Environment\r\n\r\n```\r\nNuxt project info: \r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: css, devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\n[Nuxt 3 repo](https://stackblitz.com/edit/github-qbfhyv) vs [Nuxt 2 repo](https://stackblitz.com/edit/github-4yydwm)\r\n\r\nBoth projects implement an identical structure (layout with header and index page)\r\n\r\nIn each of the reproductions, run the necessary commands to run the project in production mode\r\n- nuxt 3 - `npm run build && npm run preview`\r\n- nuxt 2 - `npm run build && npm run start`\r\n\r\nInspect the HTML code returned by accessing the index page. Notice the `\u003Cstyle>` tag in the `\u003Chead>`\r\n\r\n### Describe the bug\r\n\r\nThe way Nuxt 3 builds and extracts the CSS from the app is inconsistent with Nuxt 2. This can cause complications when migrating an existing Nuxt 2 app.\r\n\r\nIn Nuxt 3, the global styles specified from the nuxt config are injected at the end of the style tag. With Nuxt 2, these were injected at the beginning.\r\n\r\nIn both reproduction repositories, the `@/assets/styles/global.css` file is provided globally. If you inspect the result of the HTML pages (build for production), the contents of that CSS file are placed differently.\r\n\r\n**Follow-up observation** - this might be unrelated, but you will also notice that in the case of Nuxt 3, it is including the styles for both `components/dynamic/One.vue` and `components/dynamic/Two.vue` even though only at render time only `\u003Cdynamic-one />` is rendered. Nuxt 2 correctly only includes the styles from `One.vue`.\r\n\r\nIf unrelated (and is considered to be an issue) i am happy to open a separate report.\r\n\r\n### Additional context\r\n\r\nWe are in the process of migrating our Nuxt 2 app to Nuxt 3 and are running into multiple complications - this is one of them.\r\n\r\nIn the case of developing an app from scratch this would not be an issue because it would inform the development style.\r\n\r\nHowever, in our case some of the global styles get overridden by rules at the component level. The new order in Nuxt 3 causes this to break.\r\n\r\n### Logs\r\n\r\n_No response_",[2931,2934],{"name":2932,"color":2933},"3.x","29bc7f",{"name":2868,"color":2869},25393,"closed","Discrepancies in production build styles order (compared to nuxt 2)","2024-01-26T20:16:35Z","https://github.com/nuxt/nuxt/issues/25393",0.63092965,{"description":2942,"labels":2943,"number":2948,"owner":2871,"repository":2871,"state":2936,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.1\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nYou can use my old preproduction from #23051 https://stackblitz.com/edit/github-ydxe3t?file=pages%2Findex.vue\r\n\r\nSee that the scoped style (margin) applies to the component. However, if you update Nuxt to 3.7.3, the style no longer applies, since the data-v attribute was removed. \n\n### Describe the bug\n\nThe issue #23051 was fixed in #23095.\r\n\r\nHowever, this prevented scoped style from being applied to the component. \r\n\n\n### Additional context\n\nSorry for the delayed feedback. As I noted in https://github.com/nuxt/nuxt/pull/23095#issuecomment-1712583276 the removal of data-v attribute entirely lead to styles not being reproduced. I already debugged the issue and I'm going to create a PR with a simple suggested fix.\r\n\r\nThis PR will revert the expected behavior of scoped styles as in 3.7.1 while keeping @huang-julien 's fix for 404 on soft navigation due to different component hash.\n\n### Logs\n\n_No response_",[2944,2945,2946,2947],{"name":2932,"color":2933},{"name":2906,"color":2907},{"name":2909,"color":2910},{"name":2882,"color":2883},23385,"Fix for #23051 broke scoped styles in server components","2023-09-28T07:36:15Z","https://github.com/nuxt/nuxt/issues/23385",0.63271666,{"description":2954,"labels":2955,"number":2958,"owner":2871,"repository":2871,"state":2936,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-19up3f?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nThis issue only occurs in the development mode using `nuxt@3.9.2`.\r\n\r\nUnscoped styles are not working on the server side - there are no `style` or `link rel=\"stylesheet\"` elements in the `head`.\r\n`css` option from the `nuxt.config` doesn't work too. Styles are loaded only on the client side so everything flickers.\r\n\r\nScoped styles are working fine.\r\nIf we build the application everything works fine.\r\n\r\n### Additional context\r\n\r\nMaybe [this](https://github.com/nuxt/nuxt/commit/20e88bb171b34a749f5468238815b022163e262e#diff-db3a4ecfe5a4e5a379ed2f515a315f812ddc26b48ce80dd3f2cada3b75c06c12R369) could be a reason for the issue but I'm not 100% sure.\r\n\r\n### Logs\r\n\r\n_No response_",[2956,2957],{"name":2932,"color":2933},{"name":2868,"color":2869},25258,"(3.9.2) Unscoped styles are not working on the server side - only in development","2024-01-17T14:01:48Z","https://github.com/nuxt/nuxt/issues/25258",0.63453007,{"description":2964,"labels":2965,"number":2968,"owner":2871,"repository":2871,"state":2936,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v20.18.1`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.22.5`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.15.4`\n- Builder: `-`\n- User Config: `extends`, `compatibilityDate`, `devtools`, `ssr`, `devServer`, `modules`, `runtimeConfig`, `i18n`\n- Runtime Modules: `@vueuse/nuxt@13.0.0`, `@nuxtjs/i18n@9.3.1`, `@pinia/nuxt@0.10.1`, `@nuxtjs/tailwindcss@6.13.2`, `@primevue/nuxt-module@4.3.1`, `@nuxt/fonts@0.11.0`\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-g35yawsg?file=app.vue\n\n(copied from [the Nuxt docs](https://nuxt.com/docs/getting-started/seo-meta#components))\n\n### Describe the bug\n\nSince the 3.16.0 update, the `\u003CStyle>` component does not render any actual styles in the document head. It did work fine in 3.15.4.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2966,2967],{"name":2906,"color":2907},{"name":2909,"color":2910},31332,"Nuxt 3.16.0 - Style components are not rendered","2025-03-13T07:45:17Z","https://github.com/nuxt/nuxt/issues/31332",0.6421761,{"description":2974,"labels":2975,"number":2980,"owner":2871,"repository":2871,"state":2936,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Environment\r\n\r\nWorks in any environment, including StackBlitz:\r\n\r\n```\r\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.1\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n```\r\n\r\n### Reproduction\r\n\r\nPlease refer to:\r\n\r\nhttps://stackblitz.com/edit/github-ydxe3t?file=pages%2Findex.vue\r\n\r\n1. Do `nuxt generate` and `npx serve .output/public`.\r\n2. CLick the link 'Go to page with scoped styles'\r\n3. **Note the 404 in console on click to the link and absence of the component**\r\n4. Reload the page\r\n5. Note the component was loaded normally\r\n6. Remove scoped attribute from style tag in pageWithScopedStyles.vue and repeat the excercise\r\n\r\n\r\n### Describe the bug\r\n\r\nApparently because scoped styles in Vue are implemented using attributes and the server components are rendered based on attribute values, server components **in some instances** will break (the client will request a non-existing URL of `__nuxt_island/whatever_id`, leading to a 404. This will lead to the component not being displayed. \r\n\r\nThe sufficient conditions for the reproduction are following: \r\n- There is a server component used on two separate pages\r\n- It's not used directly, but through a third component (I used a wrapper) which uses this component as root\r\n- It has a prop that is different on these pages (I injected the route, I suppose it's also possible that a state variable may be passed as a prop\r\n\r\nThis is not reproduced in dev, only if the site is statically generated using `nuxt generate` and the client navigates to the page which uses scoped styles using soft navigation, e.g. `\u003CNuxtLink />`\r\n\r\nI'm not certain what causes the bug.\r\n\r\n### Additional context\r\n\r\nI know this might sound like an edge case but I arrived to this bug in a real-world scenario and I imagine this could be an issue for example for component library creators who want to use .server components (llike myself). An easy enough workaround is to avoid using it as a root in the wrapper but I'm sure there are also other unforeseen scenarios that might trigger this problem.\r\n\r\nThe fact is, it works OK in dev, but breaks during SSG.\r\n\r\n### Logs\r\n\r\n_No response_",[2976,2977,2978,2979],{"name":2932,"color":2933},{"name":2906,"color":2907},{"name":2909,"color":2910},{"name":2882,"color":2883},23051,"Nuxt3 .server (island) components fail to render on soft navigation if they have different props on pages","2023-09-10T08:06:13Z","https://github.com/nuxt/nuxt/issues/23051",0.643468,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGaAi5IwTwIUVvINd7xcDKbfX-DtOKeNulDrcB1_vbmI":-1},"/nuxt/nuxt/25330"]