Nuxt 3 + Vuetify 3 自定义SASS变量配置无效求助

环境依赖 #

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

问题现象 #

自定义主题颜色可正常生效，但通过@use "vuetify/settings" with (...)设置的SASS变量（如根字体大小、排版样式等）完全被忽略。

当前配置代码 #

1. 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,
    ),
  )
);

2. plugins/vuetify.ts #

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

import { createVuetify } from "vuetify";

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

3. nuxt.config.ts #

import vuetify from "vite-plugin-vuetify";

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"],
    },
  },
});

修复步骤 #

1. 移除重复的配置文件引入 #

在nuxt.config.ts的css数组中，移除自定义config.scss的引入（避免与vite-plugin-vuetify的配置冲突）：

// nuxt.config.ts
css: ["vuetify/lib/styles/main.sass", "@mdi/font/css/materialdesignicons.min.css"],

2. 正确配置vite-plugin-vuetify #

修改modules中的插件初始化逻辑，传入自定义配置文件参数：

// nuxt.config.ts
modules: [
  async (_options, nuxt) => {
    nuxt.hooks.hook("vite:extendConfig", (config) => {
      config.plugins.push(
        vuetify({
          styles: {
            configFile: "assets/styles/config.scss",
          },
        })
      );
    });
  },
],

3. 删除插件中重复的配置文件引入 #

在plugins/vuetify.ts中，移除手动引入的config.scss（vite-plugin-vuetify会自动处理）：

// import "@/assets/styles/config.scss"; // 删除这一行

4. 修正SASS变量的语法问题 #

• 字体名建议添加引号，避免编译异常
• 替换未定义的$font变量为实际字体名：

// assets/styles/config.scss
@use "vuetify/settings" with (
  $font-size-root: 20px,
  $heading-font-family: "Space Grotesk",
  $body-font-family: "Arial, sans-serif", // 替换为你的实际字体
  $color-pack: false,
  $utilities: false,
  $typography: (
    "h1": (
      "size": 2rem,
      "weight": 500,
      "line-height": 2.2rem,
      "letter-spacing": 0,
      "font-family": "Comic Sans MS",
      "text-transform": none,
    ),
  )
);

5. 验证效果 #

重启Nuxt开发服务，检查根字体大小、H1排版等自定义样式是否已生效。

内容的提问来源于stack exchange，提问作者Augustin Riedinger