Nuxt + Vuetify。如何应用主题颜色

vue.js Vue.js

西里神奇

2020-03-23

我正在使用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

问题是，更改这些主题颜色不会导致任何更改。

任何想法如何解决这个问题？

第2870篇《Nuxt + Vuetify。如何应用主题颜色》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
神无凯 2020.03.23

解决方案很简单。

Two files govern this - nuxt.config.js and node_modules/vuetify/es5/colors.js.

You need to open nuxt.config.js, and head over to the vuetify property. The themes property under the vuetify: {...} 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.

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android