Nuxt 3中Vuetify 3自定义SCSS变量全局访问配置问题

问题核心 #

自定义的Vuetify SCSS变量仅在Vuetify组件中生效，Vue组件及自定义SCSS文件中仍读取默认值——原因是每次单独导入vuetify/settings时都会重新初始化变量，未实现全局共享。

分步解决方案 #

1. 重构自定义变量文件 #

创建assets/styles/variables.scss，统一管理自定义变量并覆盖Vuetify默认值，同时暴露变量供全局使用：

// 定义自定义变量
$font-size-root: 18px;

// 导入Vuetify settings并覆盖默认值
@use "vuetify/settings" with (
  $font-size-root: $font-size-root,
);

// 导出变量供全局SCSS/Vue组件访问
@forward "vuetify/settings" as vuetify-*;
@forward "." as variables-*;

2. 更新Vuetify插件配置 #

修改plugins/vuetify.ts，确保导入自定义变量文件而非原生Vuetify settings：

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// 导入自定义变量文件
import '../assets/styles/variables.scss'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

3. 配置Nuxt全局导入SCSS变量 #

在nuxt.config.ts中添加全局SCSS预处理器配置，让所有Vue组件和SCSS文件自动导入自定义变量：

export default defineNuxtConfig({
  css: ['~/assets/styles/main.scss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          // 全局导入变量文件，无需手动在每个文件中导入
          additionalData: '@use "~/assets/styles/variables.scss" as *;',
        },
      },
    },
  },
  modules: ['@nuxtjs/vuetify'],
  vuetify: {
    // 指定Vuetify使用我们的自定义变量配置文件
    styles: {
      configFile: '~/assets/styles/variables.scss',
    },
  },
})

4. 验证变量同步 #

修改pages/index.vue和assets/styles/main.scss，现在可以直接访问自定义后的变量：

<template>
  <p>This text is 18px</p>
</template>

<style lang="scss">
p {
  font-size: $font-size-root;
}
@debug $font-size-root; // 输出18px
</style>

// assets/styles/main.scss
body {
  font-size: $font-size-root;
}
@debug $font-size-root; // 输出18px

原理说明 #

通过统一的变量文件覆盖Vuetify默认值，并利用Vite的additionalData全局导入该文件，确保所有SCSS上下文（包括Vue组件的style块）都使用同一套自定义变量；同时Vuetify通过指定configFile读取该文件的配置，实现变量全局同步。

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