Vue cli開発に基づく外部コンポーネントVantのデフォルトスタイルの変更の詳細な説明

Vue cli開発に基づく外部コンポーネントVantのデフォルトスタイルの変更の詳細な説明

序文

外部コンポーネントを導入する際に、デフォルトのスタイルを変更したい場合は、クラスを通じて変更できますが、通常は重みが足りないなどのさまざまな理由があります。公式サイトには、実際に設定ファイルを上書きしてスタイルを変更するためのテーマカスタマイズソリューションのセットがリストされています。公式サイトのアドレスは次のとおりです:テーマのカスタマイズ

ヒント:以下はこの記事の主な内容です。以下のケースを参考にしてください。

1. 少ない

Vant は Less を使用してスタイルを前処理し、いくつかの組み込みスタイル変数を備えているため、スタイル変数を置き換えることで必要なテーマをカスタマイズできます。

プロジェクトに合わせて less を設定します。

npm をインストールします --save-dev
npm をインストール less-loader --save-dev

設定後、 less が使用できるかどうかを確認してください。エラーが報告された場合、通常はより高いバージョンが原因です。
バージョンをダウングレードしてみることもできます

"レスローダー": "^5.0.0",

2. コンポーネントをインポートする

例えば、ここではタブタブコンポーネントを紹介します

<van-tabs v-model="アクティブ">
 <van-tab title="タグ 1">コンテンツ 1</van-tab>
 <van-tab title="タグ 2">コンテンツ 2</van-tab>
 <van-tab title="タグ 3">コンテンツ 3</van-tab>
 <van-tab title="タグ 4">コンテンツ 4</van-tab>
</van-tabs>
エクスポートデフォルト{
 データ() {
 戻る {
  アクティブ: 2,
 };
 },
};

アクティブなフォントの色、下部の状態の色などのデフォルトのスタイルがあります。

ここに画像の説明を挿入

3. 設定ファイルを変更する

ステップ1: lessファイルを直接インポートする

main.js にインポートします:

'vant/lib/index.less' をインポートします。

ステップ2: スタイル変数を変更する

vue.config.js ファイルを見つけます。存在しない場合は、package.json と同じレベルに新しい構成ファイルを作成し、次のコードを追加します。

モジュール.エクスポート = {
 css: {
 ローダーオプション: {
  少ない: {
  // less-loader のバージョンが 6.0 未満の場合は、lessOptions レベルを削除し、オプションを直接設定してください。
  より少ないオプション: {
   変数の変更: {
   // 変数 'text-color': '#111' を直接上書きします。
   '境界線の色': '#eee',
   // または、less ファイルで上書きすることもできます (ファイル パスは絶対パスです)
   ハック: `true; @import "your-less-file-path.less";`,
   },
  },
  },
 },
 },
};

変数を直接変更することも、リストを less ファイルにリストしてインポートすることもできます。less のバージョンが低い場合は、コード内のコメントに従ってください。
前のラベル コンポーネントの使用法ドキュメントに戻り、下にスクロールしてスタイル変数のセクションを見つけます。

ここに画像の説明を挿入

コンポーネントのスタイルをいくつか定義します。名前を確認することで、変更が必要なスタイルを変更できます。たとえば、変数 @tab-active-text-color は、アクティブ状態のフォントの色を表します。これを必要な色に変更する必要があるため、構成ファイルで変更します。

ここに画像の説明を挿入

サーバーを再起動すると、コンポーネントのスタイルが変更されたことがわかります。

ここに画像の説明を挿入

要約する

これで、Vue cli 開発に基づく外部コンポーネント Vant のデフォルト スタイルを変更する方法についての記事は終了です。より関連性の高い Vuecli Vant デフォルト スタイル コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueはvantのUIコンポーネントのスタイルをカバーできない
  • Vue での Vant コンポーネント スタイルの失敗の問題と解決策
  • vue パブリック リスト選択コンポーネント、Vant-UI スタイルの参照
  • vue がスコープされた後に vant UI コンポーネントのスタイルを変更できない問題を解決します
  • Vueはvantの組​​み込みスタイルプロセスを修正

<<:  ffmpeg 中国語パラメータの説明と使用例

>>:  Windows プラットフォーム構成 5.7 バージョン + MySQL データベース サービス

推薦する

ウェブページの HTML コード: スクロールテキストの作成

このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...

Linux クラウド サーバーに JDK と Tomcat をインストールするための詳細な手順 (推奨)

JDKをダウンロードしてインストールするステップ 1: まず、公式 Web サイト http://...

どのような種類の MYSQL 接続クエリを知っていますか?

序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...

VirtualBox を使用して Linux クラスターをシミュレートする方法

1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...

Ubuntu 18.04 は mysql 5.7.23 をインストールします

以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...

擬似分散グラフィックを実現するための VMware 構成 Hadoop チュートリアル

1. 実験環境シリアルナンバープロジェクトソフトウェアとバージョン1オペレーティング·システムCen...

html+cssレイアウトの3つの方法(ナチュラルレイアウト/フローレイアウト/ポジショニングレイアウト)

1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....

Vueのドラッグ可能なコンポーネントであるVue Smooth DnDの使用方法の詳細な説明

目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...

ウィンドウ表示効果を実現するJavaScript

この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

ページを更新せずにフォームを送信するには iframe を使用します

そこで、この問題を解決するために埋め込みフレームワークを導入します。具体的な原則は、フォームがデータ...

国内SNSのホームページを比較・分析して得た経験をみんなで共有(写真)

この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...

DockerでGDBを使用するときにブレークポイントを入力できない問題を解決する

質問docker で gdb を実行すると、ブレークポイントに到達しますが、ブレークポイントに入るこ...

HTML でのアンカータグの使用例の共有

アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...

VueにおけるAxios非同期通信の詳細な説明

1. まず、インタラクティブに使用するための .json ファイルを作成します。json データ形式...