如何用自定义颜色覆盖Vuetify变量？

Question

我想按照this

覆盖自定义颜色的vuetify变量

我创建了一个包含基本文件夹（_colors，_typography）和main.styl文件的手写笔文件夹。 _color文件已导入main.styl文件，后者将导入main.js

这是我的文件结构： enter image description here

导入包含在main.js：

中

 import '../node_modules/vuetify/dist/vuetify.min.css'
 import './assets/stylus/main.styl'

在_color.styl内，我有这个测试代码：

$red = {
  "base":       #FF0000,
  "darken-1":   #e50000,
  "darken-2":   #990000,
  "darken-3":   #7f0000,
  "darken-4":   #000000,
}

自定义颜色没有显示......我在这里遗漏了什么吗？

Answer 1

正如@webdevdani所提到的，我不认为压倒性的vuetify风格是可能的。

我建议你解决一个问题：使用theme。

在main.js中，您可以设置颜色，如下所示：

Vue.use(Vuetify, {
  theme: {
    primary: '#FFA726',
    secondary: '#29B6F6',
    anyColor: '#0000'
})

你可以在你的任何应用程序组件中调用它：

color="primary"

或

color="anyColor"

Source and more info about Vuetify theme

Answer 2

您需要在导入Vuetify之前声明变量。假设main.styl导入了修改后的_color.styl，切换导入顺序应该可以。

引用documentation：

  

现在配置了触控笔，您可以为想要更改的触控笔变量设置默认值。这些必须在导入之前声明，并将自动覆盖Vuetify的默认设置。

您可以在here中看到所有可以更改的变量。