如何在自定义SCSS文件中使用Vuetify主题配置的颜色？

下面提供两种可靠的实现方式，对应不同的使用场景：

方式一：使用CSS自定义属性（支持动态主题切换） #

首先确保你的Vuetify实例已正确注册自定义主题，否则CSS变量不会自动生成：

// plugins/vuetify.ts
import { createVuetify, ThemeDefinition } from 'vuetify'

export const GalaxyLightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: "#9C27B0",
  },
}

// 注册主题到Vuetify实例
export default createVuetify({
  theme: {
    defaultTheme: 'GalaxyLightTheme',
    themes: {
      GalaxyLightTheme,
    },
  },
})

完成主题注册后，即可在main.scss中直接使用Vuetify自动生成的CSS变量，你的原有代码只要确保样式导入顺序正确就能生效：

@use 'vuetify/lib/styles/main' with (
  $body-font-family: 'Open Sans'
);

.my-custom-class {
  color: var(--v-primary-base);
}

注：Vuetify会为主题中的每个颜色生成对应的CSS变量，格式为--v-[颜色名]-base，比如primary对应--v-primary-base，secondary对应--v-secondary-base等。

方式二：通过Sass变量传递（静态编译，性能更优） #

如果不需要动态切换主题，可以直接在Sass层面定义与主题一致的颜色变量，避免依赖CSS变量：

@use 'vuetify/lib/styles/main' with (
  $body-font-family: 'Open Sans',
  // 同步主题中的primary颜色
  $colors: (
    primary: #9C27B0,
  )
);

.my-custom-class {
  // 使用Sass的map-get方法获取颜色值
  color: map-get($colors, primary);
}

这种方式会在编译时直接将颜色值替换到CSS中，适合不需要主题切换的场景。

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