通过SASS变量修改v-text-field默认错误颜色无效的问题

你的问题出在两个核心点上：

1. Sass变量配置错误使用CSS自定义属性 #

你在$field-error-color中使用了rgb(var(--v-theme-error-700))，这是CSS自定义属性的写法，但Vuetify的Sass配置文件（settings.scss）是在预编译层面生效的，无法直接识别运行时的CSS变量。

正确的写法应该使用Sass层面的主题变量，或者直接指定具体颜色值：

@use 'vuetify/settings' with (
  // 方式1：引用Vuetify内置的Sass主题变量
  $field-error-color: $v-theme-error-700,
  // 方式2：直接写入具体颜色值（十六进制、RGB均可）
  // $field-error-color: #b00020
);

2. 未确保settings.scss被正确导入 #

仅创建settings.scss文件不会自动生效，需要在Vuetify的初始化流程中导入该文件，让Sass变量被预处理器加载：

在项目的Vuetify配置文件（比如src/plugins/vuetify.ts）中添加导入语句：

import '@/styles/settings.scss' // 根据你的实际文件路径调整
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify()

另外确认项目已正确配置Sass预处理器（Vite默认支持，无需额外配置），按上述步骤修改后，v-text-field的默认错误颜色即可正常生效。

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