web-dev-qa-db-ja.com

Vuejs Vuetifyカラーテーマが機能しない

私はvuetifyでvuejsを使用しています。Basicvuetifyテンプレートを配置し、色のテーマを変更しようとしましたが、色が切り替わりません。コンソールにエラーが表示されず、キャッシュもクリアされます。

Main.jsコード：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  theme: {
    primary: colors.Indigo.base, // #E53935
    secondary: colors.Indigo.base, // #FFCDD2
    accent: colors.Indigo.base // #3F51B5
  }
});

const app = new Vue({
    el: '#app',
    // ...
});

そして、これは私のテンプレートがどのように見えるかです。

    <div id="app">
  <v-app light>
    <v-navigation-drawer
      fixed
      v-model="drawerRight"
      right
      clipped
      app
    >
    </v-navigation-drawer>
    <v-toolbar
      dark
      fixed
      app
      clipped-right
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-spacer></v-spacer>
      <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>

        </v-layout>
      </v-container>
    </v-content>
  </v-app>
    </div>
vue.jsvuejs2vuetify.js
5
tigerel

色が切り替わらない

何の色？テーマの色を使用するコンポーネントはありません。たとえば、ツールバーの背景色を変更したい場合は、<v-toolbar color="primary">

3
Kael Watts-Deuchar

@DigitalDrifterが@import '~vuetify/src/stylus/main'を提案しました。

ただし、これはスタイラスコードです。したがって、たとえばstylusフォルダーを作成し、そのフォルダーにmain.stylを置くことができます。これにより、デフォルトのスタイルを簡単に変更できます。

そのコードをmain.stylに追加します。

// main.styl
@import '~vuetify/src/stylus/main'

次に、main.stylをapp.jsに含めます

// app.js
import './stylus/main.styl'

後でVuetifyのデフォルトのスタイラス変数をオーバーライドする場合（main.stylで行う）、変数を@importの前に宣言する必要があります。そうすると、変数は自動的にVuetifyのデフォルト変数をオーバーライドします。

0
Traxo