如何通过SASS变量全局定制Vuetify3按钮的字体样式？

我希望全局定制部分Vuetify组件的样式，Vuetify提供了SASS API可通过覆盖变量实现定制，但无法仅针对按钮修改字体族、字号及字间距。

已配置摇树优化并创建了settings.scss文件，成功覆盖了默认字体：

@use 'vuetify/settings' with (
    $utilities: false,
    $color-pack: true,

    $body-font-family: $font,
    $font-size-root: 16px, 
);

通过这种方式可以覆盖_variables.scss中的变量，但根据Variable API文档添加$button-font-size: 100px后，样式没有任何变化。Chrome调试发现，字号仍由以下CSS控制：

.v-btn--size-default {
    --v-btn-size: 0.875rem;
    font-size: var(--v-btn-size);
}

虽然可以用.v-btn { font-size: 100px !important; }这类CSS代码强制修改，但这种方式不够健壮，易在版本更新后失效。希望使用官方提供的定制功能，请问是否找错了方向，该API是否并非用于定制Vuetify组件？

你的问题核心是混淆了Vuetify 2和Vuetify 3的样式定制逻辑：Vuetify 3+ 已将大部分组件样式从纯SASS变量改为CSS变量+SASS映射变量的方式控制，旧文档中的$button-font-size这类单变量已被废弃，需要通过组件专属的SASS映射来定制。

针对按钮的字体相关样式，正确的定制方式是在settings.scss中覆盖$btn映射变量，直接定义对应的CSS变量值：

1. 全局定制默认按钮样式 #

@use 'vuetify/settings' with (
    $utilities: false,
    $color-pack: true,
    $body-font-family: $font,
    $font-size-root: 16px,
    // 定制按钮的字体及尺寸变量
    $btn: (
      'size': 1.25rem,       // 对应--v-btn-size，控制按钮字号
      'font-family': '你的自定义字体族',
      'letter-spacing': '0.05em' // 字间距
    )
);

2. 针对不同尺寸按钮单独定制 #

如果需要对default/small/large等不同尺寸的按钮分别设置样式，可以扩展sizes子映射：

@use 'vuetify/settings' with (
    $utilities: false,
    $color-pack: true,
    $body-font-family: $font,
    $font-size-root: 16px,
    $btn: (
      'sizes': (
        'default': (
          'size': 1.25rem,
          'font-family': '你的自定义字体族',
          'letter-spacing': '0.05em'
        ),
        'small': (
          'size': 0.875rem,
          'letter-spacing': '0.02em'
        ),
        'large': (
          'size': 1.5rem,
          'font-family': '你的自定义字体族'
        )
      )
    )
);

原理说明 #

Vuetify 3的组件样式系统会将你定义的SASS映射变量编译为对应的CSS变量（比如--v-btn-size），再应用到按钮元素上。这种方式是官方推荐的健壮定制方案，不会因版本更新导致样式失效。

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