序文外部コンポーネントを導入する際に、デフォルトのスタイルを変更したい場合は、クラスを通じて変更できますが、通常は重みが足りないなどのさまざまな理由があります。公式サイトには、実際に設定ファイルを上書きしてスタイルを変更するためのテーマカスタマイズソリューションのセットがリストされています。公式サイトのアドレスは次のとおりです:テーマのカスタマイズ ヒント:以下はこの記事の主な内容です。以下のケースを参考にしてください。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Windows プラットフォーム構成 5.7 バージョン + MySQL データベース サービス
このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...
日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...
JDKをダウンロードしてインストールするステップ 1: まず、公式 Web サイト http://...
序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...
1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...
以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...
1. 実験環境シリアルナンバープロジェクトソフトウェアとバージョン1オペレーティング·システムCen...
1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....
目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...
この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
そこで、この問題を解決するために埋め込みフレームワークを導入します。具体的な原則は、フォームがデータ...
この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...
質問docker で gdb を実行すると、ブレークポイントに到達しますが、ブレークポイントに入るこ...
アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...
1. まず、インタラクティブに使用するための .json ファイルを作成します。json データ形式...