Nuxt 2搭配Vuetify 2使用时v-toolbar组件color属性不生效如何解决

你开启了Vuetify的treeShake特性，该特性会按需打包用到的Vuetify样式，默认不会全量导入所有Material Design颜色的样式类，所以即使元素上已经加上了green类名，对应的CSS规则也没有被打包进最终产物，自然不会生效。

你可以先打开浏览器开发者工具的样式面板，搜索.green类，如果没有对应的background-color样式规则，即可确认是该问题。

你可以选择以下任意一种方式解决：

• 方案一：关闭treeShake（不推荐，会增大产物体积）
  修改nuxt.config.js里的vuetify配置，把treeShake设为false即可：

  // nuxt.config.js
  export default {
    vuetify: {
      customVariables: ['~/assets/variables.scss'],
      treeShake: false
    },
  }
  

• 方案二：在Vuetify主题配置中声明需要用到的颜色
  在nuxt.config.js的vuetify配置里添加theme字段，把你要用到的颜色注册到主题中：

  // nuxt.config.js
  import colors from 'vuetify/lib/util/colors'
  export default {
    vuetify: {
      customVariables: ['~/assets/variables.scss'],
      treeShake: true,
      theme: {
        themes: {
          light: {
            green: colors.green.base, // 直接使用Vuetify内置的绿色，也可以自定义十六进制色值
            // 其他需要用到的颜色都可以在这里添加
          }
        }
      }
    },
  }
  

• 方案三：全量导入Vuetify颜色样式
  在你的assets/variables.scss文件中添加颜色样式的导入语句：

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

如果以上方案执行后问题依然存在，可以检查是否有全局自定义样式的优先级更高，覆盖了v-toolbar的背景色规则。

内容的提问来源于stack exchange，提问作者Hendrik Jan