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

Question

我想通过以下 this 使用自定义颜色覆盖 vuetify 变量

我创建了一个手写笔文件夹，其中包含基本文件夹(_colors、_typography)和main.styl 文件。 _color 文件被导入到 main.styl 文件中，后者又被导入到 main.js

这是我的文件结构:

并且导入包含在 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 风格是不可能的。

我建议您一个解决方法:使用主题。

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

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

您可以在应用程序的任何组件中这样调用它:

color="primary"

或

color="anyColor"

Source and more info about Vuetify theme