Vueプロジェクトでlessを使用するためのヒント

序文

私たちが目にする美しいウェブページはすべて、UI によって慎重に設計され、フロントエンド エンジニアによって構築されています。ウェブページにかっこいいスタイルを持たせたい場合、CSSを使用して処理する必要があり、必然的に多くの重複した冗長なコードが発生します。このとき、less、sass、scssなどのスタイルプリプロセッサが登場し、CSSコードが大幅に簡素化され、開発効率が向上します。今日は、この記事に従って、Vue プロジェクトでエフェクトとミックスインを浸透させるために、less 構文を使用する方法を見てみましょう。

1. スタイルの浸透

Vue プロジェクトの構造は、テンプレート、スクリプト、スタイルの 3 つの部分で構成されます。スタイルの lang 属性は、スタイルの構文を決定します。scoped 属性を設定すると、現在のページのスタイルが他のページに影響するのを防ぐことができます。

1. パターン浸透とは何ですか?

設定したスタイルは元のスタイルを上書きします

2. 使い方は？

パッケージ化されたパブリック コンポーネントを使用する場合、コンポーネントによって提供される元のスタイルに満足できず、スタイルを調整する必要があります。パブリック コンポーネントのスタイルを変更することはできないため、この問題を解決するにはスタイル ペネトレーションを使用する必要があります。

vue2 での記述

コードは次のとおりです（例）：

<style lang="less" スコープ>
	/深い/ a {
            テキスト装飾: なし;
	}
</スタイル>

<style lang="less" スコープ>
	::v-deep a {
            テキスト装飾: なし;
	}
</スタイル>

Vue3での記述

<style lang="less" スコープ>
	:深い(a) {
            テキスト装飾: なし;
	}
</スタイル>

2. ミキシング

1. ミックスインとは何ですか?

js の関数と同様に、スタイル内の繰り返しコードを抽出し、使用時に複数回導入できます。

2. 使い方は？

意味

コードは次のとおりです（例）：

<style lang="less" スコープ>
    .abc() {
        色: スカイブルー
        }
</スタイル>

使用

<style lang="less" スコープ>
    ｐ {
        フォントサイズ: 20px;
        .abc();
      }
</スタイル>

3. 自動インポートが少ない

1. 自動インポートのメリット

頻繁に出現するスタイルファイルを抽出し、less ファイルにまとめることができます。

ファイルを手動でインポートしなくても、必要な場所で直接使用できます。

2. どうすれば達成できるでしょうか?

• vue-cliのstyle-resoures-loaderプラグインを使用して、各vueコンポーネントのスタイルタグに自動的に挿入します。

プロジェクトのルートディレクトリのターミナルでvue add style-resources-loaderを実行して、vue-cliプラグインを追加します。

注: ターミナル ウィンドウにクエリがポップアップ表示されます。y と入力して less を選択します。

• インストールが完了すると、vue.config.js ファイルが自動的に生成されます。構成に自動的にインポートする必要がある less ファイルのアドレスを追加するだけです。

コードは次のとおりです（例）：

定数パス = require('path')

モジュール.エクスポート = {
  プラグインオプション: {
    'スタイルリソースローダー': {
      プリプロセッサ: 'less'、
      パターン:
        // 自動的にインポートする必要があるファイルを設定します path.join(__dirname, './src/xx/xx.less')
      ]
    }
  }
}

要約する

これで、Vue プロジェクトで less を使用するためのヒントに関するこの記事は終了です。Vue で less を使用する方法の詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。