\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",[2003],{"name":2004,"color":2005},"pending triage","E99695",26696,"Nuxt 3.11 with webpack builder lose style in SFC","2024-06-30T11:04:41Z","https://github.com/nuxt/nuxt/issues/26696",0.63480383,{"description":2012,"labels":2013,"number":2018,"owner":1994,"repository":1994,"state":1995,"title":2019,"updated_at":2020,"url":2021,"score":2022},"### 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_",[2014,2015],{"name":2004,"color":2005},{"name":2016,"color":2017},"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.64612854,{"labels":2024,"number":2028,"owner":1994,"repository":1994,"state":2029,"title":2030,"updated_at":2031,"url":2032,"score":2033},[2025],{"name":2026,"color":2027},"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.60923237,{"description":2035,"labels":2036,"number":2049,"owner":1994,"repository":1994,"state":2029,"title":2050,"updated_at":2051,"url":2052,"score":2053},"### 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_",[2037,2040,2043,2046],{"name":2038,"color":2039},"3.x","29bc7f",{"name":2041,"color":2042},"needs reproduction","FBCA04",{"name":2044,"color":2045},"closed-by-bot","ededed",{"name":2047,"color":2048},"inline styles","68AF97",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.62360877,{"description":2055,"labels":2056,"number":2060,"owner":1994,"repository":1994,"state":2029,"title":2061,"updated_at":2062,"url":2063,"score":2064},"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```",[2057,2058,2059],{"name":2038,"color":2039},{"name":2004,"color":2005},{"name":2041,"color":2042},15560,"Nuxt3 npm run build makes some plugins styles missing","2023-01-19T22:07:10Z","https://github.com/nuxt/nuxt/issues/15560",0.62702304,{"description":2066,"labels":2067,"number":2073,"owner":1994,"repository":1994,"state":2029,"title":2074,"updated_at":2075,"url":2076,"score":2077},"### 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_",[2068,2069,2070,2071],{"name":2038,"color":2039},{"name":1985,"color":1986},{"name":1988,"color":1989},{"name":2072,"color":2042},"馃敤 p3-minor",22932,"Styles not always in correct order when in production (SSG)","2023-09-04T11:31:34Z","https://github.com/nuxt/nuxt/issues/22932",0.62827545,{"description":2079,"labels":2080,"number":2083,"owner":1994,"repository":1994,"state":2029,"title":2084,"updated_at":2085,"url":2086,"score":2087},"### 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_",[2081,2082],{"name":2038,"color":2039},{"name":2004,"color":2005},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.62867796,{"description":2089,"labels":2090,"number":2099,"owner":1994,"repository":1994,"state":2029,"title":2100,"updated_at":2101,"url":2102,"score":2103},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.13.0`\r\n- Nuxt Version: `3.3.3`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `app`, `ssr`, `srcDir`, `modules`, `vite`, `nitro`, `googleFonts`, `i18n`, `content`, `plausible`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.6.5`, `@pinia/nuxt@0.4.7`, `@nuxtjs/google-fonts@3.0.0`, `nuxt-icon@0.3.3`, `@nuxtjs/i18n-edge@8.0.0-beta.10-28003311.2c39470`, `@nuxt/content@2.5.2`, `@nuxtjs/plausible@0.2.0`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nI was not able to create a minimal reproduction for this issue as this bug does not seem to occur in a minimal example. So here is how you can reproduce it:\r\n\r\n```sh\r\ngit clone --recurse-submodules https://github.com/WolfgangDrescher/lassus-tricinium-project.git demo\r\ncd demo\r\ngit checkout bb55ac1\r\nnpm install\r\nnpx nuxi upgrade --force # currently it will upgrade to nuxt v3.3.3\r\nnpm run build\r\nnode .output/server/index.mjs\r\n```\r\n\r\nCompare this to the working example with nuxt v3.3.1:\r\n\r\n```sh\r\ngit clone --recurse-submodules https://github.com/WolfgangDrescher/lassus-tricinium-project.git demo\r\ncd demo\r\ngit checkout bb55ac1\r\nnpm install\r\nnpm run build\r\nnode .output/server/index.mjs\r\n```\r\n\r\n\r\n### Describe the bug\r\n\r\nCSS and JS files are missing the the `\u003Chead>` when building my project with `npm run build`. In development mode everything works as expected. When I lock nuxt to `v3.3.1` it also works as expected but using `v3.3.2` or above the build will not have css styles for example (some global styles that are not `scoped` are displayed though). This is why I think it must be a bug related to nuxt but I'm unsure. Debugging this for quite a while it could also be related to Vite or `@nuxtjs/tailwindcss`.\r\n\r\nFirst I thought that https://github.com/nuxt-modules/tailwindcss/issues/628 might be the problem but this does not seem to be the case.\r\n\r\nMaybe `vite` was updated in nuxt `v3.3.2` so the production build is bundled different?\r\n\r\n### Additional context\r\n\r\nNuxt v3.3.1:\r\n\r\n\u003Cimg width=\"1104\" alt=\"Bildschirm颅foto 2023-04-04 um 18 02 33\" src=\"https://user-images.githubusercontent.com/865594/229855320-94c7abbf-179d-4344-8a50-148a099babec.png\">\r\n\r\nNuxt v3.3.3:\r\n\r\n\u003Cimg width=\"1103\" alt=\"Bildschirm颅foto 2023-04-04 um 18 05 02\" src=\"https://user-images.githubusercontent.com/865594/229855428-1ca85c5b-fc40-4662-84ca-f094a00dae31.png\">\r\n\r\n\r\n### Logs\r\n\r\nThe only error message I get is this `importScripts is not defined` related to a web worker. I don't think this can be the problem. Maybe if the Vite build somehow fails after this. But no errors in the console when while building. And still nuxt `v3.3.1` works just fine.\r\n\r\n```shell-script\r\nverovio-85527134.js:1 Uncaught ReferenceError: importScripts is not defined at verovio-85527134.js:1:1\r\n```\r\n",[2091,2092,2093,2096],{"name":2038,"color":2039},{"name":1985,"color":1986},{"name":2094,"color":2095},"upstream","E8A36D",{"name":2097,"color":2098},"upstream-bug","B60205",20091,"Missing `\u003Clink>` tags in production build","2023-04-20T14:41:11Z","https://github.com/nuxt/nuxt/issues/20091",0.6317619,{"labels":2105,"number":2108,"owner":1994,"repository":1994,"state":2029,"title":2109,"updated_at":2110,"url":2111,"score":2112},[2106,2107],{"name":2038,"color":2039},{"name":2004,"color":2005},13102,"CSS image paths are unnecessarily rewritten during build","2023-01-19T16:47:41Z","https://github.com/nuxt/nuxt/issues/13102",0.63285303,["Reactive",2114],{},["Set"],["ShallowReactive",2117],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"ZoNplYW9LnKhbTFPKvGo6IwXSrTe2sjjABT8cyDP1Lg":-1},"/nuxt/nuxt/25393"]