序文外部コンポーネントを導入する際に、デフォルトのスタイルを変更したい場合は、クラスを通じて変更できますが、通常は重みが足りないなどのさまざまな理由があります。公式サイトには、実際に設定ファイルを上書きしてスタイルを変更するためのテーマカスタマイズソリューションのセットがリストされています。公式サイトのアドレスは次のとおりです:テーマのカスタマイズ ヒント:以下はこの記事の主な内容です。以下のケースを参考にしてください。 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 データベース サービス
MySQL公式サイトのダウンロードアドレス: https://dev.mysql.com/downl...
これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...
このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 12.19....
目次1. mixin の使い方は? 2. ミックスイン使用時の注意2.1. ミックスイン オブジェク...
1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...
1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...
図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...
HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...
目次1. Springbootプロジェクトを準備する2. 関連する設定を実行する3.パッケージ4.D...
vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。テレポートは通常、瞬...
目次1. 初期SQLの準備2.MysqlはSQL文の実行時間をチェックします3. さまざまなクエリの...
ハイパーフ公式サイトHyperf 公式ドキュメントのインストール1. Dockerの使用docker...
証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...
導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...
主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...