问题描述
我想通过遵循
I want to override vuetify variables with custom colors by following this
I've created a stylus folder which contains base folder (_colors
, _typography
) and main.styl
file. The _color
file is imported into main.styl
file, which the latter is imported into main.js
Here is my file structure:
And the imports are included in main.js
:
import '../node_modules/vuetify/dist/vuetify.min.css'
import './assets/stylus/main.styl'
Inside the _color.styl
, I have this test code:
$red = {
"base": #FF0000,
"darken-1": #e50000,
"darken-2": #990000,
"darken-3": #7f0000,
"darken-4": #000000,
}
The custom colors aren't showing...am I missing something here?
As @webdevdani mentionned it, I don't think overriding vuetify style is possible.
I propose you a workaround : use a theme
.
In your main.js
you can set colors, like this :
Vue.use(Vuetify, {
theme: {
primary: '#FFA726',
secondary: '#29B6F6',
anyColor: '#0000'
}})
And you'll be able to call it like this in any of your app's component :
color="primary"
or
color="anyColor"
Source and more info about Vuetify theme
这篇关于如何使用自定义颜色覆盖 Vuetify 变量?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!