我正在使用Nuxt.js + Vuetify.js项目
看文件assets/style/app.styl
我们有
// Import and define Vuetify color theme
// https://vuetifyjs.com/en/style/colors
@require '~vuetify/src/stylus/settings/_colors'
$theme := {
primary: $blue.darken-2
accent: $blue.accent-2
secondary: $grey.lighten-1
info: $blue.lighten-1
warning: $amber.darken-2
error: $red.accent-4
success: $green.lighten-2
}
// Import Vuetify styling
@require '~vuetify/src/stylus/main'
.page
@extend .fade-transition
问题是,更改这些主题颜色不会导致任何更改。
任何想法如何解决这个问题?
解决方案很简单。
Two files govern this -
nuxt.config.js
andnode_modules/vuetify/es5/colors.js
.You need to open nuxt.config.js, and head over to the
vuetify
property. Thethemes
property under thevuetify: {...}
section lets you map the class names to configured color variables.Further, to change the values of the colour variables, modify the file node_modules/vuetify/es5/colors.js. Here, you define any colors you need to whatever hex color code you want.