Vuetify 按钮颜色不起作用

Question

我正在使用 webpack 编译我的 vuejs 项目并使用 vuetify 框架，但我无法让颜色正常工作。例如：

<v-btn color="error">Error</v-btn>

不生成红色错误按钮，而是仅生成白色错误按钮。我包括所有使用此文件的文件：

main.js

import Vuetify from 'vuetify'
Vue.use(Vuetify)
import '../node_modules/vuetify/dist/vuetify.min.css'

和App.vue

<style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/main'
</style>

有人能告诉我我忘记了什么吗？

Answer 1

更新到 vuetify v0.16.9 以使用颜色

Answer 2

如果您使用的是旧版本的 vuetify，您可能必须使用 class 而不是颜色。在更新版本之前，我遇到了同样的问题。

   <v-btn class="error">Error</v-btn>

但是，他们也有一些关于手写笔的文档： https://vuetifyjs.com/en/style/colors

While convenient, the color pack increases the css export size by ~30kb. Some projects may only require the default provided classes that are created at run-time from the Vuetify bootstrap. To disable this feature, you will have to manually import and build the main stylus file. This will require a stylus loader and a .styl file entry.

<style lang="stylus">
  $color-pack = false

  @import '~vuetify/src/stylus/main'
</style>

Answer 3

如果您没有像这样用 v-app 包装您的应用...

<v-app>
  <router-view/>
</v-app>

你会得到有趣的行为。将应用程序包装在该标签中为我修复了它。我显然跳过了快速设置指南中的入口语句：D

Answer 4

要解决此问题，请使用：

<v-app>

有关详细信息，请阅读这篇文章：My application does not look correct

https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct

Vuetify 按钮颜色不起作用

Vuetify button colors are not working

vue.js

vuetify.js