Flash of unstyled content in generated page when using scss nuxt 3.0.0-rc.12

Environment

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "HOST=0.0.0.0 nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.12",
    "sass": "^1.55.0"
  }
}

nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['@/main.scss'],
  experimental: {
    // Temporary workaround for stackblitz
    writeEarlyHints: false,
  },
});

Reproduction

StackBlitz minimal reproduction link https://stackblitz.com/edit/github-hywqdd?file=app.vue

Describe the bug

At reload time it shows unstyled pages. But in the dev server, it seems fine. It only appears when I generate the project with npm run generate and serve with npm run preview

Additional context

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

Logs

No response

[danielroe]

This is a regression of the inline styles implementation and you can work around it by setting experimental.inlineSSRStyles to false.

[danielroe]

@kwright02 Some info here.

Basically, start with your project and remove as much as you can until the problem can’t be reproduced. 🙏

I have a fix for this issue in progress but want to make sure it also solves your situation.