\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",[2932],{"name":2933,"color":2934},"pending triage","E99695",26696,"nuxt","open","Nuxt 3.11 with webpack builder lose style in SFC","2024-06-30T11:04:41Z","https://github.com/nuxt/nuxt/issues/26696",0.57266307,{"description":2943,"labels":2944,"number":2946,"owner":2936,"repository":2936,"state":2937,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: 3.17.6\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: experimental, app, compatibilityDate\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\n`npm run generate && npm run preview` and move to /red and /blue.\nhttps://stackblitz.com/edit/nuxt-starter-tkv78b3v\n\n\n### Describe the bug\n\nWhen combining Server Components and page transitions, styles are correctly applied in development builds. However, in production builds, the corresponding \u003Cstyle> tags disappear from the \u003Chead> tag at the exact moment of a page transition.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2945],{"name":2933,"color":2934},32537,"\u003Cstyle> disappear temporarily on `pageTransition` when using server components in production","2025-07-06T02:33:43Z","https://github.com/nuxt/nuxt/issues/32537",0.6444172,{"description":2952,"labels":2953,"number":2955,"owner":2936,"repository":2936,"state":2937,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.3.0`\r\n- Nuxt Version: `3.1.1`\r\n- Nitro Version: `2.1.0`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `webpack`\r\n- User Config: `ssr`, `builder`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-bye8qn?file=pages%2Findex.vue,nuxt.config.ts\r\n\r\n1. run `npm run generate`\r\n2. serve the dist directory `python -m http.server`\r\n3. visit the page http://0.0.0.0:8000\r\n4. open dev tools > disable javascript\r\n5. reload the page\r\n6. the styles are not applied (we would expect a red background with a blue text color)\r\n\r\n\n\n### Describe the bug\n\nBy prerendering of a website using the webpack-builder the prefetched Styles are not applied on page load. \r\nSo on page load it could take a few hundered milliseconds (depending on Network, Device and amount of styles) before the styles are loaded correctly. This behavior leads to a really bad UX by visiting a website because the content on the page is jumping a lot after style load. \r\n\r\nAfter digging for the reason I compared the output with an older nuxt version (3rc8). So I figured out, the styles are loaded as:\r\n* 3rc8 `\u003Clink rel=\"prefetch stylesheet\" href=\"/_nuxt/css/6cb3bde.css\">`\r\n* now `\u003Clink rel=\"prefetch\" as=\"style\" href=\"/_nuxt/css/6cb3bde.css\">`\r\n\r\nbut the new way only prefetches the style, but does not apply it. (See Reproduction by disabling js)\r\nSo, because the styles are getting loaded (and applied) anyway, it seems some js is taking care of loading and appling it.\r\n\r\n\n\n### Additional context\n\n#### Countercheck\r\n\r\n* replace `rel=\"prefetch\" as=\"style\"` with `rel=\"prefetch stylesheet\"` in the index.html\r\n* reload the page (the style is applied almost immediately)\n\n### Logs\n\n_No response_",[2954],{"name":2933,"color":2934},18558,"prefetched styles not loading (webpack-builder)","2024-06-30T11:09:38Z","https://github.com/nuxt/nuxt/issues/18558",0.64674145,{"description":2961,"labels":2962,"number":2975,"owner":2936,"repository":2936,"state":2937,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### 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```",[2963,2966,2969,2972],{"name":2964,"color":2965},"good first issue","fbca04",{"name":2967,"color":2968},"bug","d73a4a",{"name":2970,"color":2971},"🔨 p3-minor","FBCA04",{"name":2973,"color":2974},"inline styles","68AF97",30435,"Nuxt Generate: css duplication issue","2025-02-22T20:48:08Z","https://github.com/nuxt/nuxt/issues/30435",0.65804684,{"description":2981,"labels":2982,"number":2987,"owner":2936,"repository":2936,"state":2937,"title":2988,"updated_at":2989,"url":2990,"score":2991},"### 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_",[2983,2984],{"name":2933,"color":2934},{"name":2985,"color":2986},"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.66693634,{"description":2993,"labels":2994,"number":3001,"owner":2936,"repository":2936,"state":3002,"title":3003,"updated_at":3004,"url":3005,"score":3006},"### 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_",[2995,2996,2999],{"name":2933,"color":2934},{"name":2997,"color":2998},"webpack","650C6F",{"name":3000,"color":2971},"needs reproduction",26423,"closed","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.6403321,{"description":3008,"labels":3009,"number":3013,"owner":2936,"repository":2936,"state":3002,"title":3014,"updated_at":3015,"url":3016,"score":3017},"I'm running nuxt using nuxt.renderer behind express with nuxt_config.dev = false. I can confirm that the webpack middleware and no HMR is running. However, I still see that extract css is not getting everything and some style tags are being generated in the head after the js bundles. \r\n\r\nCan someone please help debug or is this the expected behavior? If I wanted to ensure no head styles are generated what can I do?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c336\">#c336\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3010],{"name":3011,"color":3012},"2.x","d4c5f9",386,"Flash of content (foc) when not in dev mode","2023-01-18T15:38:49Z","https://github.com/nuxt/nuxt/issues/386",0.642724,{"description":3019,"labels":3020,"number":3031,"owner":2936,"repository":2936,"state":3002,"title":3032,"updated_at":3033,"url":3034,"score":3035},"### Environment\r\n\r\n#### package.json\r\n```\r\n{\r\n \"private\": true,\r\n \"scripts\": {\r\n \"build\": \"nuxt build\",\r\n \"dev\": \"HOST=0.0.0.0 nuxt dev\",\r\n \"generate\": \"nuxt generate\",\r\n \"preview\": \"nuxt preview\",\r\n \"postinstall\": \"nuxt prepare\"\r\n },\r\n \"devDependencies\": {\r\n \"nuxt\": \"3.0.0-rc.12\",\r\n \"sass\": \"^1.55.0\"\r\n }\r\n}\r\n\r\n```\r\n#### nuxt.config.ts\r\n```\r\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\r\nexport default defineNuxtConfig({\r\n css: ['@/main.scss'],\r\n experimental: {\r\n // Temporary workaround for stackblitz\r\n writeEarlyHints: false,\r\n },\r\n});\r\n\r\n```\r\n\r\n\r\n### Reproduction\r\n**StackBlitz minimal reproduction link**\r\nhttps://stackblitz.com/edit/github-hywqdd?file=app.vue\r\n\r\n\r\n### Describe the bug\r\n\r\nAt reload time it shows unstyled pages. But in the dev server, it seems fine. It only appears when I generate the project with \r\n`npm run generate` and serve with `npm run preview`\r\n\r\n\r\n\r\n### Additional context\r\n\r\n**In my project, this problem doesn't appear until nuxt3 rc-11.0.0. It only starts appearing after updating my project to nuxt3 rc-12.0.0** \r\n\r\n### Logs\r\n\r\n_No response_",[3021,3024,3027,3028],{"name":3022,"color":3023},"3.x","29bc7f",{"name":3025,"color":3026},"workaround available","11376d",{"name":2967,"color":2968},{"name":3029,"color":3030},"❗ p4-important","D93F0B",15213,"Flash of unstyled content in generated page when using scss nuxt 3.0.0-rc.12 ","2023-01-19T17:46:35Z","https://github.com/nuxt/nuxt/issues/15213",0.6498423,{"labels":3037,"number":3040,"owner":2936,"repository":2936,"state":3002,"title":3041,"updated_at":3042,"url":3043,"score":3044},[3038,3039],{"name":3022,"color":3023},{"name":2933,"color":2934},13102,"CSS image paths are unnecessarily rewritten during build","2023-01-19T16:47:41Z","https://github.com/nuxt/nuxt/issues/13102",0.6527448,{"description":3046,"labels":3047,"number":3052,"owner":2936,"repository":2936,"state":3002,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@9.5.1\r\n- Builder: vite\r\n- User Config: css, devtools, experimental, modules, postcss\r\n- Runtime Modules: @nuxtjs/i18n@8.0.0-beta.12\r\n- Build Modules: -\r\n\n\n### Reproduction\n\nrepo: https://github.com/stefanprobst/issue-nuxt-missing-css\r\n\r\nfollow the steps in https://github.com/stefanprobst/issue-nuxt-missing-css/blob/main/readme.md\r\n\r\nthe readme also mentions 3 workarounds\r\n- setting `experimental: { inlineSSRStyles: false }` in `nuxt.config.ts`\r\n- deleting `i18n.config.ts` (may be related to https://github.com/nuxt-modules/i18n/issues/2177)\r\n- downgrading to v3.5.3\n\n### Describe the bug\n\ncss stylesheets are not included in a production build.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3048,3049,3050,3051],{"name":3022,"color":3023},{"name":3025,"color":3026},{"name":2967,"color":2968},{"name":2970,"color":2971},21840,"missing css stylesheets in production build","2023-06-30T04:26:05Z","https://github.com/nuxt/nuxt/issues/21840",0.6532523,["Reactive",3058],{},["Set"],["ShallowReactive",3061],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fE1dan1LYachrByPA-u_-IgQfg3OTv0_x1_rYhXvBvpA":-1},"/nuxt/nuxt/24996"]