如何在SCSS渐变中使用Vuetify的主/次要颜色？

我想在Vue 3单文件组件里用SCSS实现从Vuetify主色到完全透明的线性渐变，以此突出元素。尝试了以下代码但没有效果——--v-primary-base变量似乎不存在，没有任何颜色被应用：

background: linear-gradient(
    to top,
    rgba(var(--v-primary-base), .3) 0%,
    rgba(255, 255, 255, 0) 100%
);

换成具体颜色（比如红色）就能正常工作，但这种写法无法实现DRY（避免重复），也不支持主题切换：

background: linear-gradient(
    to top,
    rgba(red, .3) 0%,
    rgba(255, 255, 255, 0) 100%
);

另外，vuetify-settings.scss也没有导出主/次要颜色相关内容。

Vite CSS配置 #

resolve: {
    alias: {
        '@': path.resolve(__dirname, './resources'),
        '@components': path.resolve(__dirname, './resources/ts/Components'),
    },
},
css: {
    preprocessorOptions: {
        scss: {
            additionalData: `@use '@/css/vuetify-settings';@import "@/css/variables.scss";@import "@/css/app.scss";`
        }
    }
}

vuetify-settings.scss内容 #

@forward 'vuetify/settings';

1. 先配置Vuetify主题变量 #

修改vuetify-settings.scss，先自定义主题色再转发Vuetify的settings模块（如果不需要自定义，也可以保留默认配置，但必须通过with语法触发变量导出）：

@use 'vuetify/settings' with (
  $colors: (
    primary: #1976D2, // 替换为你的主色，或保留Vuetify默认值
    // 可添加其他主题色配置，比如secondary、accent等
  )
);

2. 在组件中使用SCSS主题变量实现渐变 #

直接引用Vuetify提供的SCSS变量，而非CSS变量，这样能确保主题色被正确识别：

background: linear-gradient(
  to top,
  rgba($v-primary-base, .3) 0%,
  rgba(255, 255, 255, 0) 100%
);

或者使用Vuetify内置的v-color函数，更简洁地生成带透明度的主题色：

// 如果组件中未自动引入Vuetify样式，需先导入
@import 'vuetify/styles';

background: linear-gradient(
  to top,
  v-color('primary', .3) 0%,
  rgba(255, 255, 255, 0) 100%
);

3. 确保Vuetify初始化时关联主题配置 #

在main.ts中初始化Vuetify时，指定主题配置文件，保证主题变量全局生效：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify({
  styles: { configFile: '@/css/vuetify-settings.scss' },
  // 其他Vuetify配置项
})

createApp(App).use(vuetify).mount('#app')

说明：--v-primary-base这类CSS变量是Vuetify运行时生成的，仅在启用CSS变量输出时可用。使用SCSS变量的方式更可靠，且能在编译阶段确保主题色的一致性，完美支持DRY原则和主题切换。

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