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 をよろしくお願いいたします。

以下もご興味があるかもしれません: