web-dev-qa-db-ja.com

Vuetify変数をカスタムカラーでオーバーライドする方法

this に従って、vuetify変数をカスタムカラーで上書きしたい

ベースフォルダー（_colors、_typography）とmain.stylファイルを含むスタイラスフォルダーを作成しました。 _colorファイルはmain.stylファイルにインポートされ、後者はmain.jsにインポートされます

これが私のファイル構造です： ここに画像の説明を入力してください

そしてインポートはmain.jsに含まれています：

 import '../node_modules/vuetify/dist/vuetify.min.css'
 import './assets/stylus/main.styl'

_color.stylの中に、次のテストコードがあります。

$red = {
  "base":       #FF0000,
  "darken-1":   #e50000,
  "darken-2":   #990000,
  "darken-3":   #7f0000,
  "darken-4":   #000000,
}

カスタムカラーが表示されていません...ここで何か不足していますか？

stylusvuetify.js
7
stormynpip

@webdevdaniが言及したように、vuetifyスタイルをオーバーライドすることは不可能だと思います。

回避策を提案します。themeを使用してください。

あなたのmain.js次のように色を設定できます。

Vue.use(Vuetify, {
  theme: {
    primary: '#FFA726',
    secondary: '#29B6F6',
    anyColor: '#0000'
})

そして、あなたはあなたのアプリのコンポーネントのどれでもこれのようにそれを呼ぶことができるでしょう：

color="primary"

または

color="anyColor"

Vuetifyテーマのソースおよび詳細情報

6
Toodoo

Vuetifyをインポートする前に、変数を宣言する必要があります。インポートの順序の切り替えは、main.styl変更したものをインポートします_color.styl。

ドキュメント からの引用：

スタイラスが構成されたので、変更するスタイラス変数のデフォルト値を設定できます。これらはインポートの前に宣言する必要があり、Vuetifyのデフォルトを自動的にオーバーライドします。

here で変更可能なすべての変数を確認できます。

0
FINDarkside