CSS not included in dynamic pages (200.html) when statically generating/hosting. (3.6.0)

[Parakoos]

Environment

• Operating System: Windows_NT
• Node Version: v16.15.0
• Nuxt Version: 3.6.0
• Nitro Version: 2.5.1
• Package Manager: npm@8.5.5
• Builder: vite
• User Config: app, ssr, vite, nitro, css, plugins, components, dev, vue, modules, sourcemap, build, dir, typescript
• Runtime Modules: @pinia/nuxt@^0.4.11, @vite-pwa/nuxt@^0.1.0, ()
• Build Modules: -

Reproduction

npx nuxi@latest init nuxt-repro-bad-200
cd nuxt-repro-bad-200
npm install

I also ran initalization of Firebase Static Hosting to be able to deploy to a server. It will redirect to the 200.html. The firebase.json file is as follows.

{
  "hosting": {
    "public": ".output/public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "trailingSlash": false,
    "rewrites": [
      {
        "source": "**",
        "destination": "/200.html"
      }
    ]
  }
}

Next, make two pages, one that is statically generated and one that is skipped.

<template>
  <!-- pages/pregen.vue -->
  <div class="big-red-box">
    I am statically generated at build time.
  </div>
</template>

<template>
  <!-- pages/dynamic.vue -->
  <div class="big-red-box">
    I am dynamically generated by the client.
  </div>
</template>

<template>
  <!-- app.vue -->
  <NuxtPage/>
</template>

Add a css file that defines the 'big-red-box' class.

/* assets/styles/main.css */
.big-red-box {
  padding: 2rem;
  background: red;
  color: white;
}

Setup the config to 1) static generate 2) include the css 3) skip dynamic from generating

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true, // Static generation
  css: ['~/assets/styles/main.css'], // Include the css file
  nitro: { prerender: { ignore: ['/dynamic'] } }, // Skip the dynamic page from generation
})

Include the workaround for the 200.html misdirection bug.

// plugins/path.client.ts
export default defineNuxtPlugin({
  order: -25,
  setup(nuxtApp) {
    delete nuxtApp.payload.path
  },
})

Finally, build and deploy

npm run generate
firebase hosting:channgel:deploy bad-200

Describe the bug

Going to the two pages show that the one that was dynamically generated does not have the required CSS while the statically generated page does.

Additional context

This also affects included css from plugins such as Vuetify.

Logs

No response

[danielroe]

Would you provide a reproduction? 🙏

[Parakoos]

I'm not really sure how to do that... I just uploaded all the code to this repo. Of course, you need to find somewhere to put the code once you deploy... If you want to see my deployed version (on Firebase Hosting) you can check out the two links:

• https://dev-phojo-app--bad-200-xqhmdfxp.web.app/pregen
• https://dev-phojo-app--bad-200-xqhmdfxp.web.app/dynamic/

Note that the dynamic page should have a big red box from the CSS, but it does not. And that is the bug.

[elishalon]

I'm having the same issue with 3.6. My SCSS file is not included in dynamic routes (ssr: false)

[ElYaiko]

Having same problem with vuetify on build, have to set experimental.inlineSSRStyles: false in nuxt.config

[stefanprobst]

there is also nuxt-modules/i18n#2177 which may be related