\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3187],{"name":3159,"color":3160},33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.64205384,{"description":3194,"labels":3195,"number":3200,"owner":3149,"repository":3149,"state":3150,"title":3201,"updated_at":3202,"url":3203,"score":3204},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-sf3hkd?file=components%2FTest.vue,components%2FHero.server.vue,app.vue\r\n\r\n1. `npm run build && npm run preview`\r\n2. observe that styles from `Test` component are missing in build and so not included when page loads\n\n### Describe the bug\n\nIt's really weird that this happens only with production build, but anyway, when using some renderless component within `.server.vue` component, the styles (from that renderless component) won't be included in final bundle, so they can't be loaded. I also should mention, that the styles will be included if you move that component out of island, as it should be\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3196,3197],{"name":3159,"color":3160},{"name":3198,"color":3199},"server components","839413",25923,"Missing styles in production when using renderless component within server component","2024-09-30T03:14:51Z","https://github.com/nuxt/nuxt/issues/25923",0.6472913,{"description":3206,"labels":3207,"number":3212,"owner":3149,"repository":3149,"state":3213,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v16.18.1\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@8.19.2\r\n- Builder: vite\r\n- User Config: build, routeRules, runtimeConfig, modules, i18n, css, plugins, devtools, eslint, vite, nitro, sourcemap, typescript\r\n- Runtime Modules: @nuxtjs/eslint-module@4.1.0, @nuxtjs/i18n@8.0.0-beta.12, @bootstrap-vue-next/nuxt@0.1.2, nuxt-jsonld@2.0.8\r\n- Build Modules: -\n\n### Reproduction\n\nI tried to make a reproduction in the stackblitz but somehow it seemed to work there. I am hoping then that maybe you can at least point me to the right direction and I can either find out the cause of this issue or at least find a way to reproduce it. Here are at least some tiny details:\r\n\r\nCSS config in nuxt.config.ts:\r\n\r\n`css: ['vue-final-modal/style.css', '~/assets/css/main.scss'],`\r\n\r\nmain.scss file includes import of bootstrap-vue-next and some separate files like e.g. variables.scss.\n\n### Describe the bug\n\nAfter updating Nuxt to version 3.6, the styles in our app are broken which forces us into staying at version 3.5. When opening the built output, the styles are not loaded. Styles from within pages and components are loaded fine but not those imported via css config prop in nuxt.config.ts.\r\n\r\nThere is also no error or warning when running the build or preview command. The strange thing also is that the styles are there when running the dev command.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3208,3211],{"name":3209,"color":3210},"3.x","29bc7f",{"name":3159,"color":3160},21911,"closed","Styles set in nuxt.config.ts css prop are not part of the build","2023-07-03T09:47:55Z","https://github.com/nuxt/nuxt/issues/21911",0.6261166,{"description":3219,"labels":3220,"number":3225,"owner":3149,"repository":3149,"state":3213,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Environment\n\ndevelopment\n\n### Reproduction\n\nThe warehouse address is temporarily unavailable.\n\n### Describe the bug\n\nSteps\r\n step 1:\r\n `npx nuxi@latest init test-project`\r\n step 2:\r\n Configure in nuxt.config.ts: builder: 'webpack'\r\n step 3:\r\n Modify the file App.vue: \u003Cdiv>\u003CNuxtPage />\u003Cdiv>\r\n step 4:\r\n Create directory: pages\r\n step 5:\r\n Add the file in the pages directory: index.vue\r\n \r\n\r\nResults锛歕r\nThe style in the \u003Cstyle> tag of the index.vue file is invalid.\r\nJS Error: Uncaught SyntaxError: Invalid or unexpected token.\n\n### Additional context\n\nNode: v18.17.0\r\nNuxt: v3.11.1\r\nvue: v3.4.21\r\n\r\nTips: The problem only occurs in the development environment (cmd: nuxt dev)\n\n### Logs\n\n_No response_",[3221,3222,3223],{"name":3159,"color":3160},{"name":3143,"color":3144},{"name":3224,"color":3147},"needs reproduction",26423,"Using webpack-builder in Nuxt3, running nuxt dev The styles in the \u003Cstyle> tag are lost","2024-11-08T22:58:37Z","https://github.com/nuxt/nuxt/issues/26423",0.63189626,{"description":3231,"labels":3232,"number":3235,"owner":3149,"repository":3149,"state":3213,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### 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_",[3233,3234],{"name":3209,"color":3210},{"name":3159,"color":3160},25393,"Discrepancies in production build styles order (compared to nuxt 2)","2024-01-26T20:16:35Z","https://github.com/nuxt/nuxt/issues/25393",0.6338864,{"description":3241,"labels":3242,"number":3250,"owner":3149,"repository":3149,"state":3213,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@8.15.2\r\n- Builder: -\r\n- User Config: devtools, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nI haven't been able to reproduce it in Stackblitz, but the following steps should work:\r\n\r\n1. Create a new project\r\n ```bash\r\n $ pnpx nuxi@latest init fouc\r\n ```\r\n\r\n2. Create the following file `assets/css/main.css`:\r\n ```css\r\n body {\r\n background-color: greenyellow;\r\n }\r\n ```\r\n\r\n3. Change `app.vue`:\r\n\r\n ```vue\r\n \u003Ctemplate>\r\n \u003Cdiv>\r\n Hello world\r\n \u003C/div>\r\n \u003C/template>\r\n ```\r\n\r\n4. Add the file to `nuxt.config.ts`:\r\n\r\n ```typescript\r\n export default defineNuxtConfig({\r\n css: ['assets/css/main.css'],\r\n })\r\n ```\r\n\r\n5. Start the dev server and refresh the page multiple times:\r\n ```bash\r\n $ pnpm dev\r\n ```\r\n\r\nYou will notice that there's FOUC in the body styles. It is much more prominent when there are multiple styles applied, or a tool like Tailwindcss is used.\r\nIf you fix the Nuxt version to `3.10.1` with the following change in `package.json` it works correctly:\r\n\r\n```json\r\n\"resolutions\": {\r\n \"nuxt\": \"3.10.1\"\r\n}\r\n```\r\n\r\n### Describe the bug\r\n\r\nFOUC for global css styles passed to `nuxt.config.ts`.\r\n\r\n### Additional context\r\n\r\nI haven't been able to pinpoint the commit that causes this issue, but looking at the release notes of Nuxt 3.10.2 it might be related to the following PR:\r\n\r\n- Inline entry styles before component styles (https://github.com/nuxt/nuxt/pull/25749)\r\n\r\n### Logs\r\n\r\n_No response_",[3243,3244,3247],{"name":3209,"color":3210},{"name":3245,"color":3246},"vite","3574D1",{"name":3248,"color":3249},"upstream","E8A36D",25806,"FOUC after Nuxt 3.10.2 update","2024-02-22T07:52:56Z","https://github.com/nuxt/nuxt/issues/25806",0.6355012,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fgC9pjWIUXLYB1A0YlAp38rqlxvQVCwKMJUaG3lu1kj0":-1},"/nuxt/nuxt/26696"]