web-dev-qa-db-ja.com

Vuetifyボタンの色が機能しない

Webpackを使用してvuejsプロジェクトをコンパイルし、vuetifyフレームワークを使用していますが、色を機能させることができません。例：これ：

<v-btn color="error">Error</v-btn>

赤いエラーボタンは生成されませんが、代わりに白いエラーボタンが表示されます。私はこれを使用してすべてのファイルを含めます：

main.js

import Vuetify from 'vuetify'
Vue.use(Vuetify)
import '../node_modules/vuetify/dist/vuetify.min.css'

およびApp.vue

<style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/main'
</style>

誰かが私が忘れていることを教えてもらえますか？

vue.jsvuetify.js
6
hupakeeeeee

色を使用するには、vuetify v0.16.9に更新します

0
JChunqui

あなたがそのようにv-appであなたのアプリを包まないならば...

<v-app>
  <router-view/>
</v-app>

あなたは面白い行動をするでしょう。そのタグでアプリをラップすると、修正されました。クイックセットアップガイドのエントリステートメントを明らかにスキップしました：D

30
Juan Pablo Ugas

この問題を解決するには、次を使用します。

<v-app>

詳細については、この記事をお読みください： アプリケーションが正しく表示されません

https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct

1
Ing Oscar MR

古いバージョンのvuetifyを使用している場合は、色の代わりにクラスを使用する必要がある場合があります。バージョンを更新するまで、同じ問題が発生しました。

   <v-btn class="error">Error</v-btn>

ただし、スタイラスに関するドキュメントもいくつかあります。 https://vuetifyjs.com/en/style/colors

カラーパックは便利ですが、cssエクスポートサイズを約30kb増やします。一部のプロジェクトでは、実行時にVuetifyブートストラップから作成されるデフォルトで提供されるクラスのみが必要になる場合があります。この機能を無効にするには、メインのスタイラスファイルを手動でインポートしてビルドする必要があります。これには、スタイラスローダーと.stylファイルエントリが必要です。

<style lang="stylus">
  $color-pack = false

  @import '~vuetify/src/stylus/main'
</style>
0
Q-Master