\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",[1984],{"name":1985,"color":1986},"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.63506925,{"description":1995,"labels":1996,"number":2006,"owner":1988,"repository":1988,"state":1989,"title":2007,"updated_at":2008,"url":2009,"score":2010},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: webpack\r\n- User Config: devtools, builder\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nThis is a minimal reproduction demo \r\nhttps://stackblitz.com/edit/github-jgemen-7nb854\r\n\r\n1. run the following command to start a production preview\r\nnpm install && npm run build && npm run preview\r\n2. navigator to router /home to see the rendered result\r\nyou should see a style blink like the following gif( The fps of the GIF is too low so sometimes its not recorded)\r\n\r\n\n\n### Describe the bug\n\nThe generated html doesn't has a <link rel=\"stylesheet\" type=\"text/css\" href=\"xxxx.css\"> which refer to the generated css. So the page will lose style on first render. The stylesheet will be inserted by js later which will cause the page to blink.\r\n\r\n```\r\n\u003C!DOCTYPE html>\r\n\u003Chtml >\r\n\u003Chead>\u003Cscript src=\"/.localservice@runtime.a2aabdd9.js\">\u003C/script>\u003Cmeta charset=\"utf-8\">\r\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\u003Clink rel=\"modulepreload\" as=\"script\" crossorigin href=\"/_nuxt/cff450d.js\">\r\n\u003Clink rel=\"modulepreload\" as=\"script\" crossorigin href=\"/_nuxt/50be641.js\">\r\n\u003Clink rel=\"modulepreload\" as=\"script\" crossorigin href=\"/_nuxt/d735102.js\">\r\n\u003Clink rel=\"prefetch\" as=\"script\" crossorigin href=\"/_nuxt/59f8411.js\">\r\n\u003Clink rel=\"prefetch\" as=\"style\" href=\"/_nuxt/css/6e37da7.css\">\r\n\u003Clink rel=\"prefetch\" as=\"script\" crossorigin href=\"/_nuxt/caf949d.js\">\r\n\u003Clink rel=\"prefetch\" as=\"style\" href=\"/_nuxt/css/ba75bce.css\">\r\n\u003Clink rel=\"prefetch\" as=\"script\" crossorigin href=\"/_nuxt/c653075.js\">\r\n\u003Clink rel=\"prefetch\" as=\"style\" href=\"/_nuxt/css/f4766f8.css\">\r\n\u003Cscript type=\"module\" src=\"/_nuxt/cff450d.js\" crossorigin>\u003C/script>\r\n\u003Cscript type=\"module\" src=\"/_nuxt/50be641.js\" crossorigin>\u003C/script>\r\n\u003Cscript type=\"module\" src=\"/_nuxt/d735102.js\" crossorigin>\u003C/script>\u003C/head>\r\n\u003Cbody >\u003Cdiv id=\"__nuxt\">\u003Ch1> This Line doesn't have color red on first render even using production build \u003C/h1>\u003C/div>\u003Cscript type=\"application/json\" id=\"__NUXT_DATA__\" data-ssr=\"true\">[[\"Reactive\",1],{\"data\":2,\"state\":3,\"once\":4,\"_errors\":5,\"serverRendered\":6,\"path\":7},{},{},[\"Set\"],{},true,\"/home\"]\u003C/script>\r\n\u003Cscript>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:\"/\",buildAssetsDir:\"/_nuxt/\",cdnURL:\"\"}}\u003C/script>\u003C/body>\r\n\u003C/html>\r\n```\r\n\r\n I have found some solution which use cacheGroups to combine all the css together but this is not what I wanted. \r\n```\r\nextractCSS: true,\r\n optimization: {\r\n ......\r\n splitChunks: {\r\n ......\r\n cacheGroups: {\r\n defaultVendors: {\r\n test: /[\\\\/]node_modules[\\\\/]/,\r\n priority: -10,\r\n reuseExistingChunk: true,\r\n },\r\n default: {\r\n minChunks: 2,\r\n priority: -20,\r\n reuseExistingChunk: true,\r\n },\r\n styles: {\r\n name: 'styles',\r\n test: /\\.(css|vue)$/,\r\n chunks: 'all',\r\n enforce: true,\r\n },\r\n },\r\n },\r\n },\r\n```\n\n### Additional context\n\nUse Vite as builder and the following config works perfect,but vite cannot handle contenthash correctly, if I change one of the js file then all js file hash will change which is terriable for browser cache.\r\n```\r\nexperimental: {\r\n inlineSSRStyles: false,\r\n },\r\n```\n\n### Logs\n\n_No response_",[1997,2000,2003],{"name":1998,"color":1999},"bug","d73a4a",{"name":2001,"color":2002},"webpack","650C6F",{"name":2004,"color":2005},"🔨 p3-minor","FBCA04",24996,"Nuxt with webpack builder enabled lose style on first render even in production build.","2024-11-19T16:21:00Z","https://github.com/nuxt/nuxt/issues/24996",0.64400536,{"labels":2012,"number":2023,"owner":1988,"repository":1988,"state":2024,"title":2025,"updated_at":2026,"url":2027,"score":2028},[2013,2016,2017,2020],{"name":2014,"color":2015},"3.x","29bc7f",{"name":1998,"color":1999},{"name":2018,"color":2019},"nitro","bfd4f2",{"name":2021,"color":2022},"❗ p4-important","D93F0B",13095,"closed","renderStyles does not render styles for app.vue dependencies","2023-01-19T16:52:49Z","https://github.com/nuxt/nuxt/issues/13095",0.62799865,{"description":2030,"labels":2031,"number":2034,"owner":1988,"repository":1988,"state":2024,"title":2035,"updated_at":2036,"url":2037,"score":2038},"### 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_",[2032,2033],{"name":2014,"color":2015},{"name":1985,"color":1986},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.6314752,{"labels":2040,"number":2043,"owner":1988,"repository":1988,"state":2024,"title":2044,"updated_at":2045,"url":2046,"score":2047},[2041,2042],{"name":2014,"color":2015},{"name":1985,"color":1986},14261,"Nuxt 3 preloads all pages, styles, fonts, svg. Adds everything in head to rel=\"prefetch\"","2023-01-19T17:31:42Z","https://github.com/nuxt/nuxt/issues/14261",0.6327663,{"labels":2049,"number":2057,"owner":1988,"repository":1988,"state":2024,"title":2058,"updated_at":2059,"url":2060,"score":2061},[2050,2051,2054],{"name":2014,"color":2015},{"name":2052,"color":2053},"upstream","E8A36D",{"name":2055,"color":2056},"upstream-bug","B60205",11986,"Webpack: SCSS Styles doesn't preload in dev","2023-01-19T16:13:27Z","https://github.com/nuxt/nuxt/issues/11986",0.63992697,{"labels":2063,"number":2064,"owner":1988,"repository":1988,"state":2024,"title":2058,"updated_at":2065,"url":2066,"score":2067},[],12023,"2023-01-19T15:58:31Z","https://github.com/nuxt/nuxt/issues/12023",0.6425683,{"labels":2069,"number":2070,"owner":1988,"repository":1988,"state":2024,"title":2058,"updated_at":2071,"url":2072,"score":2067},[],12118,"2023-01-19T15:59:14Z","https://github.com/nuxt/nuxt/issues/12118",{"description":2074,"labels":2075,"number":2076,"owner":1988,"repository":1988,"state":2024,"title":2058,"updated_at":2077,"url":2078,"score":2067},"### Environment\r\n\r\nLocal:\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v14.17.1`\r\n- Nuxt Version: `3-3.0.0-27234503.d5127e9`\r\n- Package Manager: `Yarn`\r\n- Bundler: `Webpack`\r\n- User Config: `modules`, `styleResources`, `css`\r\n- Runtime Modules: `@nuxtjs/style-resources@1.2.1`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Also reproduces in CodeSandbox\r\n\r\n### Describe the bug\r\n\r\nWhen I use SCSS with Webpack, styles doesn't preload.\r\nYou can see it in [codeSanbox](https://codesandbox.io/s/ecstatic-field-zvuql?file=/nuxt.config.ts)\r\n\r\n### Reproduction\r\n\r\n1. Add node-sass, sass and sass-loader packages in your package.json\r\n2. Disable Vite in nuxt.config file. vite=false\r\n3. Add some styles in \u003Cstyle> tag with attr lang=\"scss\". For example:\r\n```\r\n\u003Cstyle lang=\"scss\">\r\n.test {\r\n font-size: 24px;\r\n font-family: sans-serif;\r\n}\r\n\u003C/style>\r\n```\r\n4. Reload page\r\n5. See, that styles doesn't preload. They've applied after small delay\r\n\r\n### Additional context\r\n\r\nI've reproduced this error in [codeSanbox](https://codesandbox.io/s/ecstatic-field-zvuql?file=/nuxt.config.ts).\r\n\r\nAlso, this problem happens with Vite. There is one more [ticket](https://github.com/nuxt/nuxt.js/issues/11990) \r\n\r\n### Logs\r\n\r\n_No response_",[],12201,"2023-01-19T16:00:22Z","https://github.com/nuxt/nuxt/issues/12201",{"labels":2080,"number":2081,"owner":1988,"repository":1988,"state":2024,"title":2058,"updated_at":2082,"url":2083,"score":2067},[],12664,"2023-01-19T16:09:47Z","https://github.com/nuxt/nuxt/issues/12664",["Reactive",2085],{},["Set"],["ShallowReactive",2088],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"zNfJk9jBjeOIY-MPk_jPCR1d_jlZTxth7_WJFoW0H_o":-1},"/nuxt/nuxt/18558"]