如何将认证的scss变量导入组件

Question

如何导入vuetify scss变量并在组件中应用我的样式?我想要访问的颜色scss(特别是主要，次要的颜色等)，我的尝试如下所示。

<style lang="scss" scoped>
@import "~vuetify/src/styles/styles.sass";
.bg-red {
background-color: map-get($colors, "red");
&:hover {
background-color: map-get($colors, "yellow");
}
}
</style>

Answer 1

https://vuetifyjs.com/en/features/theme/#custom-properties

您不需要为此导入.scss文件。您可以简单地访问您的主题颜色:

background-color: var(--v-primary-base)