如何通过SCSS变量修改Vuetify 3 v-text-field的轮廓样式？

你之前用的SCSS变量名称不对，Vuetify 3中控制outline类型表单组件轮廓颜色的全局变量并非$input-outline-*系列，正确的变量如下：

• $field-border-color：未激活（默认、未聚焦）状态的轮廓颜色
• $field-border-focus-color：激活（聚焦）状态的轮廓颜色
• $field-border-hover-color：鼠标悬停时的轮廓颜色

把你的main.scss代码改成下面这样，就能全局修改所有outline变体组件的轮廓颜色：

@use 'vuetify/settings' with (
  $field-border-color: #E7DFF6,    // 未激活状态
  $field-border-focus-color: #CFBCFF, // 激活（聚焦）状态
  $field-border-hover-color: #E9DEFC  // 悬停状态
);
@use 'vuetify/styles';
@use 'vuetify' as *;

这些变量会自动作用于所有设置了variant="outline"的Vuetify表单组件（比如v-text-field、v-select、v-textarea等），不用单独给每个组件写样式。

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