\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_",[2057,2058,2059],{"name":2004,"color":2005},{"name":1988,"color":1989},{"name":2060,"color":1992},"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.6299929,{"description":2067,"labels":2068,"number":2071,"owner":1994,"repository":1994,"state":2049,"title":2072,"updated_at":2073,"url":2074,"score":2075},"### 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_",[2069,2070],{"name":2045,"color":2046},{"name":2004,"color":2005},25393,"Discrepancies in production build styles order (compared to nuxt 2)","2024-01-26T20:16:35Z","https://github.com/nuxt/nuxt/issues/25393",0.6318508,{"description":2077,"labels":2078,"number":2086,"owner":1994,"repository":1994,"state":2049,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### 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_",[2079,2080,2083],{"name":2045,"color":2046},{"name":2081,"color":2082},"vite","3574D1",{"name":2084,"color":2085},"upstream","E8A36D",25806,"FOUC after Nuxt 3.10.2 update","2024-02-22T07:52:56Z","https://github.com/nuxt/nuxt/issues/25806",0.6346166,{"description":2092,"labels":2093,"number":2096,"owner":1994,"repository":1994,"state":2049,"title":2097,"updated_at":2098,"url":2099,"score":2100},"### Environment\n\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, modules, unocss\r\n- Runtime Modules: @unocss/nuxt@0.58.3\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-zoukhz?file=package.json\n\n### Describe the bug\n\nI am experiencing an issue with UnoCSS in a Nuxt 3.9.2 project where styles are not immediately applied upon page refresh during the development phase. Interestingly, this issue does not occur in Nuxt 3.9.1.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2094,2095],{"name":2045,"color":2046},{"name":2004,"color":2005},25252,"Styles Delayed on Page Refresh with UnoCSS in Nuxt 3.9.2","2024-01-17T10:02:25Z","https://github.com/nuxt/nuxt/issues/25252",0.6352961,["Reactive",2102],{},["Set"],["ShallowReactive",2105],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"gC9pjWIUXLYB1A0YlAp38rqlxvQVCwKMJUaG3lu1kj0":-1},"/nuxt/nuxt/26696"]