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

如果您没有像使用v-app那样包装您的应用程序......

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

你会得到有趣的行为。将应用程序包装在该标签中为我修复了它。我明显地跳过快速设置指南中的条目声明：D

Answer 2

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

Answer 3

如果您使用的是较旧版本的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>

Answer 4

要解决此问题，请使用：

<v-app>