Vuetify 按钮颜色不起作用答案

【问题标题】：Vuetify button colors are not workingVuetify 按钮颜色不起作用
【发布时间】：2018-04-17 11:15:45
【问题描述】：

我正在使用 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>

谁能告诉我我忘记了什么？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

虽然方便，但颜色包将 css 导出大小增加了 ~30kb。一些项目可能只需要默认提供的类是在运行时从 Vuetify 引导程序创建的。禁用此功能，您将不得不手动导入和构建主手写笔文件。这将需要一个手写笔加载器和一个 .styl 文件条目。

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

要解决这个问题，请使用：

<v-app>

欲了解更多信息，请阅读这篇文章：My application does not look correct

【讨论】：

嗨！已经有一个答案完全相同的解决方案：stackoverflow.com/a/50866408/10614791 请不要发布重复的答案
我从官方 vuetify 文档中写了一些有用的 url，以获取更多信息，也许我应该把它写成 cmets，对不起，我是这个社区的新手
没问题，我只是想引导您朝着正确的方向前进。在您的情况下，您只是在已经存在的答案中添加一些有用的信息，最好的办法是编辑该答案。（如果不是很重要，也可以按你说的写评论）