Nuxt 3 + Vuetify 3 how to plug custom SASS variables

Question

I'm struggling to get my setup to work using

    "vuetify": "^3.1.4"
    "nuxt": "^3.1.2"
    "vite-plugin-vuetify": "^1.0.2",
    "@mdi/font": "^7.1.96",
    "sass": "^1.58.0",

I've read as many ressources as possible on the topic, starting with this one which seems outdated?

Here's my setup:

// assets/styles/config.scss

@use "vuetify/settings" with (
  $font-size-root: 20px,
  $heading-font-family: Space Grotesk,
  $body-font-family: $font,
  $color-pack: false,
  $utilities: false,
  $typography: (
    "h1": (
      "size": 2rem,
      "weight": 500,
      "line-height": 2.2rem,
      "letter-spacing": 0,
      "font-family": Comic Sans,
      "text-transform": none,
    ),
  )
);

import "@/assets/styles/config.scss";

import { createVuetify } from "vuetify";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(
    createVuetify({
      ssr: true,
      // components,
      // directives,
      styles: { configFile: "assets/styles/config.scss" },
      theme: {
        defaultTheme: "light",
        themes: {
          dark: false,
          light: {
            colors: {
              primary: "#4093ff",
              secondary: "#4d4d4d",
              success: "#25c760",
              warning: "#ffc82e",
              error: "#ff4c29",
            },
          },
        },
      },
    })
  );
});

import vuetify from "vite-plugin-vuetify";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ["vuetify/lib/styles/main.sass", "@mdi/font/css/materialdesignicons.min.css", "@/assets/styles/config.scss"],
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    // @ts-ignore
    async (options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) => config.plugins.push(vuetify()));
    },
  ],

  vite: {
    ssr: {
      noExternal: ["vuetify"], // add the vuetify vite plugin
    },
  },
});

Custom theme will work but SASS variables are ignored.

Any help appreciated!

Thanks!!

Answer 1

After a full day of researches, I found this github issue, which includes a temporary fix of the underlying bug:

https://github.com/nuxt/nuxt/issues/15412#issuecomment-1399189084

I hope others won't have as much trouble as I did!