\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```",[3139],{"name":3140,"color":3141},"pending triage","E99695",33041,"nuxt","open","Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.6016955,{"description":3150,"labels":3151,"number":3161,"owner":3143,"repository":3143,"state":3144,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0-rc.11`\r\n- Nitro Version: `0.5.4`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-hkou23?file=app.vue,components%2FBlock.vue,main.ts,package.json\r\n\r\nRun Vite env: `npm run vite`\r\nRun Nuxt env: `npm run nuxt`\r\n\r\nApps runs same components, one with Vite, the other with Nuxt.\n\n### Describe the bug\n\nIt seems like when running Nuxt, order of precedence of CSS only gets respected in SSR, but at the moment the app mounts, every scoped CSS declaration will get overwritten by parent.\r\n\r\nThat results in a flash in styling (first page render showing same CSS as Vite envs, then it blinks to another state).\r\n\r\nI suspect this is coming from order of precedence of CSS that is respected in Vite env, but not in Nuxt.\r\n\r\nI am not sure it is a bug or some of the \"caveats\" of scoped CSS, I just noticed the difference while working with `\u003Cstyle>` and thought it would be safer to report.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3152,3155,3158],{"name":3153,"color":3154},"bug","d73a4a",{"name":3156,"color":3157},"vite","3574D1",{"name":3159,"color":3160},"馃嵃 p2-nice-to-have","0E8A16",15048,"Order of precedence of CSS different from vite-plugin-vue","2024-11-19T16:20:21Z","https://github.com/nuxt/nuxt/issues/15048",0.6298753,{"description":3167,"labels":3168,"number":3179,"owner":3143,"repository":3143,"state":3144,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/igrdi/nuxt-generate-css-duplicates\n\n### Describe the bug\n\nIt adds `\u003Clink>` with the same styles as the inlined one:\n\n1. Run `npm run generate`\n2. Check `/.output/public/index.html` lines 3 and 4: inline styles and `/.output/public/_nuxt/entry.***.css `\n\n\n\n\n\n### Additional context\n\nPlease also check nuxt.config.ts:\n\n```\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: '2024-11-01',\n devtools: { enabled: true },\n ssr: true,\n features: {\n inlineStyles: (id) => !!id && id.includes('.vue'),\n },\n});\n```\n\nProbably related to the issue: https://github.com/nuxt/nuxt/issues/21821\n@danielroe, FYI\n\n\n### Logs\n\n```shell-script\nnpm run generate\n```",[3169,3172,3173,3176],{"name":3170,"color":3171},"good first issue","fbca04",{"name":3153,"color":3154},{"name":3174,"color":3175},"馃敤 p3-minor","FBCA04",{"name":3177,"color":3178},"inline styles","68AF97",30435,"Nuxt Generate: css duplication issue","2025-02-22T20:48:08Z","https://github.com/nuxt/nuxt/issues/30435",0.63479346,{"description":3185,"labels":3186,"number":3188,"owner":3143,"repository":3143,"state":3144,"title":3189,"updated_at":3190,"url":3191,"score":3192},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: webpack\r\n- User Config: devtools, builder\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhere is a minimal reproduction: https://stackblitz.com/edit/github-jgemen-thxzqm?file=nuxt.config.ts\r\nnpm run dev\r\nnavigate to /home. The h1 should have red color and correct font size\r\n\r\n### Describe the bug\r\n\u003Cstyle> declared in vue file has no effect in dev build \u003Cbr/>\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",[3187],{"name":3140,"color":3141},26696,"Nuxt 3.11 with webpack builder lose style in SFC","2024-06-30T11:04:41Z","https://github.com/nuxt/nuxt/issues/26696",0.63717747,{"labels":3194,"number":3198,"owner":3143,"repository":3143,"state":3199,"title":3200,"updated_at":3201,"url":3202,"score":3203},[3195],{"name":3196,"color":3197},"2.x","d4c5f9",9351,"closed","The order of reading css changes when node_env ='production'","2023-01-18T22:05:29Z","https://github.com/nuxt/nuxt/issues/9351",0.61558414,{"labels":3205,"number":3210,"owner":3143,"repository":3143,"state":3199,"title":3211,"updated_at":3212,"url":3213,"score":3214},[3206,3209],{"name":3207,"color":3208},"3.x","29bc7f",{"name":3140,"color":3141},13102,"CSS image paths are unnecessarily rewritten during build","2023-01-19T16:47:41Z","https://github.com/nuxt/nuxt/issues/13102",0.6183793,{"description":3216,"labels":3217,"number":3220,"owner":3143,"repository":3143,"state":3199,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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_",[3218,3219],{"name":3207,"color":3208},{"name":3140,"color":3141},21911,"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.61923724,{"description":3226,"labels":3227,"number":3235,"owner":3143,"repository":3143,"state":3199,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-kz3fe2?file=components%2FMyComponent.vue\r\n\r\n### Describe the bug\r\n\r\nWhen using scoped CSS (might also be without scoped, haven't tried), there's a problem after building:\r\n1. The CSS for the component gets added _inline_ **and** as a `\u003Clink>`\r\n2. All the CSS files are declared before the JS files, instead of after (in Nuxt 2 JS files came first, so the browser can start loading them async).\r\n\r\n#2 is not a direct problem, because browsers don't wait for the CSS to load in order to start loading JS, but since the JS is preloaded, it might still be better to hoist them above CSS?\r\n\r\n### Additional context\r\n\r\nWe discovered this while profiling our project in production and saw some odd results from Lighthouse, complaining about render blocking CSS.\r\n\r\nWe then noticed that almost all of the CSS was loaded twice (once inline, and once through `\u003Clink>`s).\r\nThe order was also reversed from Nuxt 2, even though that might not be so much of a bug.\r\n\r\nComparing the Lighthouse feedback from Nuxt 2 to Nuxt 3 (in our prod app), a few things are striking:\r\n- In Nuxt3: **all** the stylesheets are marked as \"A late network request adjusted the page layout\", whereas in Nuxt 2 this doesn't happen.\r\n- **None** of the css files are marked as preload in Nuxt 3, whereas they are in Nuxt 2\r\n\r\n### Logs\r\n\r\n_No response_",[3228,3229,3231,3234],{"name":3207,"color":3208},{"name":3230,"color":3175},"needs reproduction",{"name":3232,"color":3233},"closed-by-bot","ededed",{"name":3177,"color":3178},27053,"Styles get added both inline and by reference and precede JS files","2024-06-01T01:51:52Z","https://github.com/nuxt/nuxt/issues/27053",0.6236612,{"description":3241,"labels":3242,"number":3247,"owner":3143,"repository":3143,"state":3199,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.15.1`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `app`, `runtimeConfig`, `css`, `vite`, `experimental`, `modules`, `build`, `sanity`\r\n- Runtime Modules: `@nuxtjs/sanity@1.8.0`, `@pinia/nuxt@0.4.11`, `nuxt-graphql-client@0.2.29`, `@vueuse/nuxt@10.2.1`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nSee screenshots attached... feel as though they'll clear enough.\n\n### Describe the bug\n\nStyles order set within a template .vue file aren't reflected during a production build (SSG, for example)\r\n\r\n\r\n\r\n\r\nThese above screenshots show the code in the editor as well as what is outputted during local development but in the following screenshots, in production, `font-feature-settings: 'case' on;` is moved to the top.\r\n\r\n\r\n\r\n\r\nAny known reason why this would happen? And if I can resolve?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3243,3244,3245,3246],{"name":3207,"color":3208},{"name":3153,"color":3154},{"name":3156,"color":3157},{"name":3174,"color":3175},22932,"Styles not always in correct order when in production (SSG)","2023-09-04T11:31:34Z","https://github.com/nuxt/nuxt/issues/22932",0.6267827,{"description":3253,"labels":3254,"number":3258,"owner":3143,"repository":3143,"state":3199,"title":3259,"updated_at":3260,"url":3261,"score":3262},"Not sure if it's an issue or a problem with my project but here it is.\r\nMy project is working fine on localhost with npm run dev, I'm using FormKit and Vue-toastification int my project and everything is nice working as expected.\r\nThe problem starts when I run npm run build. The builded code is missing the styles of my plugins! toasts run with no styles, and all my inputs are missing the styles its classes has! \r\nShould I do something before running build to build my plugins styles with them?\r\n\r\nthis is my nuxt.config.ts file if it might help!\r\n```\r\n// @ts-nocheck\r\nimport Icons from \"unplugin-icons/vite\"\r\n\r\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\r\nexport default defineNuxtConfig({\r\n\tcss: [\"~/assets/fonts/droidkufi/droidarabickufi.css\", \"@formkit/themes/genesis\"],\r\n\tmodules: [\r\n\t\t\"@nuxtjs/tailwindcss\",\r\n\t\t[\r\n\t\t\t\"@pinia/nuxt\",\r\n\t\t\t{\r\n\t\t\t\tautoImports: [\"defineStore\"],\r\n\t\t\t},\r\n\t\t],\r\n\t\t\"@formkit/nuxt\",\r\n\t],\r\n\tplugins: [\"~/plugins/flowbite.client.ts\", \"~/plugins/i18n.ts\"],\r\n\tvite: {\r\n\t\tplugins: [\r\n\t\t\tIcons({\r\n\t\t\t\tautoInstall: true,\r\n\t\t\t}),\r\n\t\t],\r\n\t},\r\n\truntimeConfig: {\r\n\t\t// secret serverside variables\r\n\t\tpublic: {\r\n\t\t\t// baseURL: \"http://127.0.0.1:8000/api/\",\r\n\t\t\t// apiBase: \"http://127.0.0.1:8000/api/\",\r\n\t\t\t// homeBase: \"http://127.0.0.1:8000\",\r\n\t\t\tbaseURL: \"https://sju.davidlouis.co/api/\",\r\n\t\t\tapiBase: \"https://sju.davidlouis.co/api/\",\r\n\t\t\thomeBase: \"https://sju.davidlouis.co\",\r\n\t\t},\r\n\t},\r\n\tvue: {\r\n\t\tcompilerOptions: {\r\n\t\t\tisCustomElement: (tag) => [\"datepicker-hijri\"].includes(tag),\r\n\t\t},\r\n\t},\r\n})\r\n```",[3255,3256,3257],{"name":3207,"color":3208},{"name":3140,"color":3141},{"name":3230,"color":3175},15560,"Nuxt3 npm run build makes some plugins styles missing","2023-01-19T22:07:10Z","https://github.com/nuxt/nuxt/issues/15560",0.6298343,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZoNplYW9LnKhbTFPKvGo6IwXSrTe2sjjABT8cyDP1Lg":-1},"/nuxt/nuxt/25393"]