Vuetify按钮颜色无法正常工作

Question

我正在使用Webpack编译我的Vue.js项目并使用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>

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

- hupakeeeeee

---

控制台有任何错误吗？按钮有任何样式吗？ - Tomer

这个按钮确实有样式，只是忽略了 color="error" 部分。它只是一个默认按钮。根本没有错误。我真的很困惑。 - hupakeeeeee

Answer 1

如果您不像这样使用v-app包装您的应用程序...

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

你会获得有趣的行为。将应用程序包装在该标记中可以解决问题。虽然我显然跳过了快速设置指南中的输入语句:D

- Juan Pablo Ugas

---

这次10000000%确定：) 唉...我不想承认我浪费了多少个小时苦思冥想 ‍♂️ - pmalbu

Answer 2

为解决这个问题，请使用以下方法：

<v-app>

更多信息请阅读此文章：我的应用程序看起来不正确 https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct

- Ing Oscar MR

---

嗨！已经有一个完全相同的解决方案的答案了：https://dev59.com/2Kbja4cB1Zd3GeqPhYFj#50866408 请不要发布重复的答案。 - Marcell Toth

我在官方Vuetify文档中编写了有用的URL以获取更多信息，也许我应该将其写在注释中，对不起，我是这个社区的新成员。 - Ing Oscar MR

没问题，我只是试图指引你走向正确的方向。 在你这种情况下，如果你只是在现有答案中添加一些有用信息，最好的方法是编辑那个答案。(或者像你说的那样，如果不是很重要，可以写一个评论) - Marcell Toth

Answer 3

如果您使用的是较旧版本的Vuetify，则可能需要使用类而不是color。 直到我更新版本，我才遇到了同样的问题。

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

然而，他们也有一些关于 stylus 的文档： https://vuetifyjs.com/en/style/colors

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

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

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

- Q-Master

Answer 4

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

- JChunqui