Style config file breaks vuetify styles on SSR since v0.18.0

[Kapcash]

Since v0.18.0, adding the configFile to customize the vuetify/settings scss variables breaks the vuetify styling on server side.
When loading the app, we can see the components have no style, and then it gets loaded on client side correctly.

Reverting the version to v0.17.x fixes the issue.

Reproduction on Stackblitz: https://stackblitz.com/edit/github-6wavaj?file=package.json

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  modules: ['vuetify-nuxt-module'],

  css: ['./assets/styles/vuetify-globals.scss'],

  vuetify: {
    moduleOptions: {
      disableVuetifyStyles: true,
      styles: {
        configFile: './assets/styles/vuetify-components.scss', // <-- remove this and the SSR styles work
      },
    },
  },

  features: {
    inlineStyles: true,
  },
});

[Kapcash]

Additional notes:

• setting disableVuetifyStyles to false breaks the build. The vuetify styles are not found.
• Whether we set features.inlineStyles to true or false doesn't change the output, since the module overwrites this value automatically:
  

  nuxt-module/src/utils/configure-nuxt.ts

  Line 29 in 8f93bcb

  nuxt.options.features.inlineStyles = false

• Switching from @use 'vuetify' to @forward 'vuetify' doesn't change anything.
• Removing the css input that loads the vuetify styles breaks the build.

[SergkeiM]

Hi @Kapcash

having same issue, for now downgrading to 0.17 solves the issue.