将主题颜色暴露给vuetify中的css变量，使其无法工作。
将主题颜色暴露给vuetify中的css变量，使其无法工作。
提问于 2019-12-30 10:13:13
我启用了自定义属性：
Vue.use(Vuetify, {
options: {
customProperties: true
}
});并试图通过CSS变量使用：
<style>
.custom{
color:var(--v-primary-base);
}
</style>这是我设置主题的vuetify.js文件：
export default new Vuetify({
icons: {
iconfont: 'mdi',
},
theme: {
themes: {
light: {
background: '#FFFFFF',
primary: '#25316A',
secondary: '#b0bec5',
accent: '#25316A',
error: '#E86674',
orange: '#FF7A0D',
golden: '#A68C59',
badge: '#F5528C',
customPrimary: '#085294',
},
dark: {
primary: '#085294',
}
},
},
})所有主题颜色都不能通过变量访问。我尝试了很多方法，但都没有奏效，也没有出现错误。有人能帮我吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-24 11:33:15
您需要将options属性传递给Vuetify实例，而不是在use函数中传递而不是。
来自文档
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
// ...
},
})Stack Overflow用户
发布于 2020-07-21 14:26:36
你必须在vuetify文件中使用选项，但是你在错误的地方使用了它，就像这样.
export default new Vuetify({
icons: {
iconfont: 'mdi',
},
theme: {
options: {
customProperties: true,
},
themes: {
light: {
background: '#FFFFFF',
primary: '#25316A',
secondary: '#b0bec5',
accent: '#25316A',
error: '#E86674',
orange: '#FF7A0D',
golden: '#A68C59',
badge: '#F5528C',
customPrimary: '#085294',
},
dark: {
primary: '#085294',
}
},
},
})在此之后，当您想使用您的自定义CSS变量时，您必须像这样使用它。
<style>
.custom{
color:var(--v-golden-base);
}
</style>这里的底部是一个默认的，我为金色变量展示了，但是您可以使用它们中的任何一个。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59529101
复制相关文章
相似问题
腾讯云开发者
