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 データベース サービス

推薦する

MySql におけるプロセス制御関数/統計関数/グループ化クエリの使用法の分析

これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...

Nodejs プラグインと使用方法の概要

このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 12.19....

Vue3 ミックスインの使い方

目次1. mixin の使い方は? 2. ミックスイン使用時の注意2.1. ミックスイン オブジェク...

Macにmysql5.7.18をインストールする詳細な手順

1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...

Linux でバックグラウンドで実行中のプログラムを表示して終了する方法

1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...

MySQL初心者のための基本操作のまとめ

図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...

画像とテキストでHTTPヘッダーのあらゆる側面を理解する

HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...

Spring Boot 階層化パッケージング Docker イメージの実践と分析 (推奨)

目次1. Springbootプロジェクトを準備する2. 関連する設定を実行する3.パッケージ4.D...

vue3のテレポート瞬間移動機能の使い方を詳しく解説

vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。テレポートは通常、瞬...

MySQL で SQL 文の実行時間を表示する方法

目次1. 初期SQLの準備2.MysqlはSQL文の実行時間をチェックします3. さまざまなクエリの...

Docker で hyperf を開発する完全な使用例の詳細な説明

ハイパーフ公式サイトHyperf 公式ドキュメントのインストール1. Dockerの使用docker...

nginx プロキシ サーバーで双方向証明書検証を構成する方法

証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...

純粋な CSS を使用してドロップダウン メニューを作成するサンプル コード

導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...

Mysql の主キーと一意キーの違いのまとめ

主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...