Vuetify + Nuxt 项目如何覆盖默认标题标签字体？

第一步：校验nuxt.config配置 #

必须开启treeShake并正确指定自定义变量文件路径，否则自定义Sass变量不会被Vuetify加载：

// nuxt.config.js / nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/vuetify'],
  vuetify: {
    treeShake: true,
    customVariables: ['~/assets/variables.scss']
  }
})

第二步：调整variables.scss的变量声明逻辑 #

你之前的写法直接重写了整个$headings映射，丢失了Vuetify默认的其它标题属性，会导致编译时回退到默认字体配置。需要用深度合并的方式覆盖指定字段，调整后的代码如下：

// 先导入自定义字体
@import '@fontsource/ledger/latin.css';
@import '@fontsource/raleway/latin.css';

// 基础字体变量定义
$font-size-root: 16px;
$body-font-family: Raleway, Helvetica, sans-serif;
$heading-font-family: Ledger, serif; // 替换为你实际要使用的标题字体名

// 先导入Vuetify默认变量，拿到原生$headings映射
@import '~vuetify/src/styles/settings/_variables.scss';

// 深度合并自定义配置到默认$headings，不影响其它默认属性
$headings: map.deep-merge($headings, (
  'h1': (
    'font-family': $heading-font-family,
  ),
  'h2': (
    'font-family': $heading-font-family,
  ),
  'h3': (
    'font-family': $heading-font-family,
  ),
  'h4': (
    'font-family': $heading-font-family,
  ),
  'h5': (
    'font-family': $heading-font-family,
  ),
  'h6': (
    'font-family': $heading-font-family,
  ),
));

// 最后导入Vuetify主样式
@import '~vuetify/src/styles/styles.sass';

第三步：清理缓存重启服务 #

Nuxt的Sass编译缓存经常会导致变量修改不生效，操作以下步骤后重启开发服务即可：

• 删除项目根目录下的.nuxt文件夹
• 删除node_modules/.cache文件夹
• 重新执行npm run dev启动项目

如果是Vuetify 3 + Nuxt 3环境，变量导入逻辑略有调整，直接用@use规则传入配置即可：

@use 'vuetify' with (
  $body-font-family: Raleway, Helvetica, sans-serif,
  $headings: (
    h1: (font-family: 'Ledger', serif),
    h2: (font-family: 'Ledger', serif)
  )
);

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