Error when building for production using SCSS configFile

[AasmundN]

Having an issue when trying to build the app for production: https://ibb.co/HrsK1F3.

Here is my nuxt config:

export default defineNuxtConfig({
   css: ["@/assets/scss/index.scss"],

   // add modules
   modules: ["@nuxtjs/i18n",  "vuetify-nuxt-module"],

   i18n: {
      locales: [
         { code: "en", iso: "en-US", file: "en.ts" },
         { code: "es", iso: "es-ES", file: "es.ts" },
      ],

      lazy: true,
      langDir: "lang",
      defaultLocale: "en",
      detectBrowserLanguage: false,
      strategy: "no_prefix",
      baseUrl: "https://deploii.no/",

      vueI18n: "./config/i18n.config.ts",
   },

   vuetify: {
      moduleOptions: {
         styles: {
            configFile: "assets/scss/_variables.scss",
         },
      },
      vuetifyOptions: "./config/vuetify/vuetify.config.ts",
   },
})

My dependencies:

"devDependencies": {
      "@nuxt/devtools": "latest",
      "@nuxt/eslint-config": "^0.1.1",
      "@nuxt/image": "1.0.0-rc.1",
      "@nuxtjs/eslint-config-typescript": "^12.0.0",
      "@nuxtjs/i18n": "8.0.0-beta.13",
      "@pinia/nuxt": "^0.4.11",
      "@types/node": "^18",
      "eslint": "^8.42.0",
      "eslint-config-prettier": "^8.8.0",
      "nuxt": "^3.6.2",
      "pinia": "^2.1.4",
      "prettier": "^2.8.8",
      "sass": "^1.63.3",
      "vuetify-nuxt-module": "^0.5.6"
   },

Help would be much appreciated.

[bogdanciuca]

@AasmundN you need to add vuetify as a dependency.

[userquin]

@AasmundN Try disabling inlineSSRStyles in your Nuxt config file, I'll try to figure out what's happening, the paths for scss files using absolute paths, should be prefixed with /@fs/, Vuetify needs a deep review (disabling inline SSR Styles, the error should go away):

experimental: {
    inlineSSRStyles: false,
}

[AasmundN]

@AasmundN you need to add vuetify as a dependency.

No? vuetify-nuxt-module adds it as one of its dependencies.

@userquin Disabling inlineSSRStyles seems to have fixed the problem. I'm guessing doing that shouldn't be necessary?

[userquin]

@userquin Disabling inlineSSRStyles seems to have fixed the problem. I'm guessing doing that shouldn't be necessary?

Experimental inlineSSRStyles is enabled by default, we need to change the custom Vuetify styles plugin here to resolve/load SSR styles properly, I'm trying to fix it.

[userquin]

It seems using Vuetify configFile styles and Nuxt inlineSSRStyles are incompatible, there is no way to get individual chunks

[AasmundN]

Okay. Is that a problem? I'm not really familiar with what inlineSSRStyles does. Or how the styles are handled by Nuxt and Vite for that matter.

[userquin]

The problem is the nuxt nitro renderer, since we've some .sass references we will receive the request, but it is missing, I have it working just returning an empty string when receiving the id in Vite load hook with SSR flag: we'll receive requests like this /plugin-vuetify/lib/components/VDialog/VDialog.sass?inline&used.

Since we're using Vuetify styles via configFile we'll get the styles in the vuetify-theme-stylesheet, maybe I can fix the error, but I have no idea if it has side effects...

[userquin]

This is the page without inlining SSR styles:

Inlining SSR styles:

[userquin]

Vuetify should avoid use SASS...

[userquin]

It is not working... maybe I have changed so many things that now it doesn't work in my local...

[userquin]

@AasmundN You can try it adding this simple Vite plugin to your nuxt config file, removing inlineSSRStyles: false from experimental option:

vite: {
  plugins: [{
    name: 'vuetify-nuxt-inline-ssr-styles',
    enforce: 'pre',
    load(id, options) {
      if (options?.ssr && id.startsWith('/plugin-vuetify/lib/'))
        return ''
    }
  }]
}

[AasmundN]

Adding the Vite plugin also seems to work, and it does reduce the size of the css-file like you showed. However when I load the page from the production build there is a little "flick" of the styles, as if the styles are being applied a little after the html appears.

[AasmundN]

Yeah, the vite plugin doesn't seem to be working properly. Is using inlineSSRStyles important?

[AasmundN]

Still in the process of deciding what framework to choose for styling in my Nuxt project, and I would really like to use Vuetify as I have used it in other SPA, Vite projects. However, adding Vuetify to Nuxt has been quite painful and things don't seem to work properly at every other turn. I'm not so familiar with how Vite works, but I've been trying to understand wether or not this inline styles thing is a deal breaker or not, and thus if I should choose some other styling framework instead. Or would it just marginally change the load time. If it is important, will eventually work more into fixing it? Thank you for your work, a module like this one is really needed.