如何在自定义组件中复用Vuetify内置的颜色配置？

方案1：直接使用内置CSS类（最简单） #

Vuetify内置了全量Material Design色彩对应的全局CSS类，无需额外导入即可直接使用，和默认success alert完全匹配的类如下：

• 浅绿背景色：使用bg-success类，直接添加到组件根元素即可
• 深绿文字色：使用text-success类，添加到需要设置文字颜色的元素上

如果需要调整深浅程度，还可以加后缀调整层级，比如更浅的背景可以用bg-success-lighten-4，更深的文字可以用text-success-darken-2，完全和Vuetify内置组件的色彩体系对齐，后续主题调整也会自动同步生效。

方案2：导入SASS变量使用（适合自定义样式场景） #

如果你需要在自己编写的SASS样式中调用这些颜色，可以直接导入Vuetify的变量文件后调用内置变量：

1. 可以在项目构建配置中配置Vuetify SASS变量全局导入，也可以在单文件组件的style块中手动导入：

@import 'vuetify/styles/variables';

2. 之后就可以直接使用内置的色彩变量，和默认success alert对应的变量为：

• 浅绿背景色：$success-lighten-5
• 深绿文字色：$success-darken-2

用法示例 #

<template>
  <!-- 直接调用CSS类的写法 -->
  <div class="bg-success pa-4 rounded">
    <p class="text-success">这段内容的配色和Vuetify success alert完全一致</p>
  </div>

  <!-- 自定义样式类的写法 -->
  <div class="custom-success-box">
    <p>这段内容用自定义SASS变量实现了相同配色</p>
  </div>
</template>

<style scoped lang="scss">
.custom-success-box {
  background-color: $success-lighten-5;
  color: $success-darken-2;
  padding: 16px;
  border-radius: 4px;
}
</style>

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