Nuxt 和 Vuetify，如何在 v-toolbar 等组件中使用颜色答案

【问题标题】：Nuxt and Vuetify, how to use color in components like v-toolbarNuxt 和 Vuetify，如何在 v-toolbar 等组件中使用颜色
【发布时间】：2021-11-10 07:50:28
【问题描述】：

我正在使用 Nuxt 2 和 Vuetify 2。
我正在尝试创建一个简单的 Vuetify v-toolbar 组件并给它一个颜色。

德文档告诉我这样做：

<template>
  <v-toolbar flat color="green"> <!-- this does not make the toolbar green! -->
    <v-toolbar-title>
      My title here
    </v-toolbar-title>
  </v-toolbar>
</template>

flat 属性起作用，因为它改变了工具栏的外观。

但是，color="green" 属性无法按预期工作。工具栏没有变绿。
在浏览器中检查 html 时，我可以看到“green”属性作为类添加到标记中：

<header 
  data-v-3ece7af3="" 
  data-v-23162205="" 
  class="v-sheet theme--light v-toolbar v-toolbar--flat green" 
  style="height: 64px;">

我按照 Vuetify 文档建议的方式设置 Nuxt：

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/vuetify'
  ],

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true
  },
}

// assets/variables.scss
@import '~vuetify/src/styles/styles.sass';

我在这里遗漏了什么明显的东西吗？

【问题讨论】：

颜色在您的配置中可用吗？也许它被其他东西覆盖了？
我不确定你在说什么。我没有在任何地方定义“绿色”，因为我希望 Vuetify 为我定义它。我尝试过其他“材料设计”颜色，例如“grey lighten-4”，但这些颜色也不起作用。
我不确定你的配置，但一个新创建的项目可以很好地与你的模板配合使用，刚刚经过测试。
我正试图找出我的配置有什么问题。我正在使用带有 Nuxt 的 nodejs 作为插件（使用 app.use(nuxt.render); 和 build(nuxt);），但我不知道如何从干净的 Nuxt 安装开始。
你的 vuetify 组件是否包裹在 v-app 标签内？

标签： vue.js sass nuxt.js vuetify.js

【解决方案1】：

可能您忘记将组件包装在 v-app 标签内，这可以解决您的问题。

【讨论】：