Vue で CSS を使用してスコープ付きをモジュールに置き換える方法は何ですか?

この記事では主に CSS モジュールを使用して Vue で切り抜きを置き換える方法を紹介します。

前に述べたように

cssモジュールはCSSをモジュール化して組み合わせるための一般的なシステムです。 vue-loader は、スコープ付き CSS の代替として CSS モジュールとの統合を提供します。この記事では CSS モジュールについて詳しく紹介します

はじめに

私が初めて Vue を使い始めたとき、scoped という技術が提唱され広く使われていました

<style scoped>
 @media (min-width: 250px) {
  .list-container:hover {
   background: orange;
  }
 }
</style>

このオプションのscoped 属性は、一意の属性 (data-v など) を自動的に追加します-21e5b78) コンポーネント内の CSS のスコープを指定します。コンパイルすると、.list-container:hover は .list-container[data-v-21e5b78]:hover のようにコンパイルされます

ただし、競合を完全に回避することはできません。

<span data-v-0467f817 class="errShow">用户名不得为空</span>

上記のコードを例に取ると、scoped を使用した後、要素に一意の属性 'data-v-0467f817' が追加され、CSS スタイルは次のようにコンパイルされます

.errShow[data-v-0467f817] {
  font-size: 12px;
  color: red;
}

ただし、ユーザーがerrShow クラス名は、errShow クラス名として定義されたすべてのコンポーネントの表示に影響します

そして CSS モジュールは、属性を追加するのではなく、クラス名を直接変更します

<span class="_3ylglHI_7ASkYw5BlOlYIv_0">用户名不得为空</span>

これにより、競合の可能性が大幅に減少します。そうでない限り、ユーザーはスパンタグのスタイルを直接設定します。これは基本的にコンポーネントの表示には影響しません

モジュール性

CSS モジュールは公式の標準でもブラウザ機能でもありませんが、ビルド内の CSS クラス名セレクターですstep スコープを制限する方法 (ハッシュを使用して名前空間のようなメソッドを実装する)。クラス名は動的に生成され、一意で、ソース ファイル内の各クラスのスタイルに正確に対応します

実際、CSS モジュールは CSS モジュール化の 1 つの方法にすぎません。なぜ CSS モジュール性が必要なのでしょうか?

CSS ルールはグローバルであり、どのコンポーネントのスタイル ルールもページ全体に有効です。したがって、早急に解決しなければならないのは、スタイルの衝突（汚染）の問題である。一般的に競合を解決するには、クラス名を長くして競合の可能性を減らしたり、親要素のセレクターを追加してスコープを制限したりすることになります。

CSSのモジュール化はこの問題を解決するものです。一般に、これは 3 つのクラス

に分かれています。 1. 命名規則クラス

このタイプの CSS モジュラー ソリューションは、主に CSS の命名を標準化するために使用されます。もちろん、構築ツールが登場する前は、OOCSS が使用されていました。それらのほとんどは CSS の名前付けに問題がありました

2. JS での CSS を完全に放棄し、JavaScript を使用して CSS ルールを作成します

3. JS を使用してスタイルを管理します

。 JS を使用してネイティブ CSS ファイルをコンパイルし、最も一般的なモジュール機能は CSS モジュールです

構築ツールの台頭により、CSS を記述するときに後者の 2 つのソリューションを使用する人が増えています。スタイルの衝突。決められた形式でコードを書くだけです

書き方

CSSモジュールの書き方を紹介します

styleタグにmodule属性を追加してCSS-loaderのモジュールモードをオンにします

<style module>
.red {color: red;}</style>

ダイナミクスを使用しますテンプレート クラス バインディング: class を指定し、クラス名の前に '$style' を付けます。

<template>
 <p :class="$style.red">
  This should be red
 </p>
</template>

クラス名にアンダースコアが含まれる場合は、角かっこ構文を使用します

<h4 :class="$style[&#39;header-tit&#39;]">类别推荐</h4>

配列またはオブジェクト構文を使用することもできます

  <p :class="{ [$style.red]: isRed }">
   Am I red?
  </p>
  <p :class="[$style.red, $style.bold]">
   Red and bold
  </p>

より複雑な場合オブジェクト構文

  <ul 
　　　 :class="{
    [$style.panelBox]:true,
    [$style.transitionByPanelBox]:needTransition
   }"

より複雑な配列構文

  <li
   :class="[
    $style[&#39;aside-item&#39;],
    {[$style[&#39;aside-item_active&#39;]]:(i === index)}
   ]"

構成

css-loader CSS モジュールのデフォルト構成は次のとおりです

{
 modules: true,
 importLoaders: 1,
 localIdentName: '[hash:base64]'
}

vue-loader の cssModules オプションを使用して、css-loader の構成をカスタマイズできます

rreee

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

nodejs aclのユーザー権限管理を詳しく解説

nodejs xml文字列をオブジェクトに解析する方法の例

WeChatアプレットにスキン変更機能を実装

以上がVue で CSS を使用してスコープ付きをモジュールに置き換える方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。