Vue3 学習による CSS モジュールとスコープの詳細な分析

#Css モジュールは、ラベル クラス名を一意のクラス名に追加します。たとえば、.class は、シンボル、一意のキー名と同様に、.class_abc_123 に変換されます

Css Scope は、要素にカスタム属性を追加し、この属性に一意の番号を追加することでスコープの分離を実現します。

原則

##CSS モジュール

CSS モジュールCSS モジュール化の実装原則は、構成ファイルで定義した内容に基づいています

クラス名の命名規則は、スコープの分離を実現するためにクラスの一意の名前を生成します##。 [関連する推奨事項:

vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]変換前

<style module>
  .title {
    font-size: 14px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
    color: #13161b;
  }
  .name {
    display: flex;
    align-items: center;
    &-img {
      width: 24px;
      height: 24px;
      border-radius: 4px;
    }
    &-text {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #13161b;
    }
  }
</style>

   cell: (h, { col, row }) => {
      // console.log(style);
      return (
        <span class={style.name}>
          <img src={testImage} class={style[&#39;name-img&#39;]} />
          <span class={style[&#39;name-text&#39;]}>{row.name}</span>
        </span>
      );
    },

• 変換後

tag.name-img は _name_img_6hlfj_11 などに変換されます。

スコープ付き CSS

Vue Loader は、スコープ付き CSS を実装するためにデフォルトで CSS ポストプロセッサ PostCSS を使用します。原則として、スコープ付きで宣言されたスタイルのセレクターによってヒットした要素にカスタム属性を追加し、属性セレクターを使用して次の効果を実現します。スコープ分離スタイル。

#変換前

<template>
  <div class="example">hi</div>
</template>
<style module>
.example {
  color: red;
}
</style>

• 変換後

<!-- 用自定义属性把类名封装起来了 -->
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

#適用

CSS モジュール

アプリケーションについて、ここでは Vue3 バージョンでの使用上の問題のみを紹介します

Vue3 では、CSS モジュール、c9ccee2e6ea535a969eb3f532ad9fe89

module 属性、つまり

a6167d77ee734aaef6dcd2aa69de7b33

を追加します。

a6167d77ee734aaef6dcd2aa69de7b33 コード ブロックは CSS モジュールにコンパイルされ、生成された CSS クラスは $style オブジェクトのキーとしてコンポーネントに公開されます。テンプレート
$style で直接使用できます。 8784e2fd63a27a4a8fec0995a8e86d19 などの名前付き CSS モジュールの場合、コンパイルされた CSS クラスは、content オブジェクトのキーとしてコンポーネントに公開されます。つまり module 属性値が何であっても、オブジェクトは公開されます。 useCssModule モジュール名は

<script setup>
import { useCssModule } from &#39;vue&#39;

// 不传递参数，获取<style module>代码块编译后的css类对象
const style = useCssModule()
console.log(style.success)  // 获取到的是success类名经过 hash 计算后的类名
    
// 传递参数content，获取<style module="content">代码块编译后的css类对象
const contentStyle = useCssModule(&#39;content&#39;)
</script>

<template>
  <div>普通style red</div>

  <div :class="$style.success">默认CssModule pink</div>
  <div :class="style.success">默认CssModule pink</div>

  <div :class="contentStyle.success">具名CssModule blue</div>
  <div :class="content.success">具名CssModule blue</div>
</template>

<!-- 普通style -->
<style>
.success {
  color: red;
}
</style>

<!-- 无值的css module -->
<style module>
.success {
  color: pink;
}
</style>

<!-- 具名的css module -->
<style module="content">
.success {
  color: blue;
}
</style>

を使用します。同じ名前の CSS モジュールの場合、後のモジュールが前のモジュールを上書きすることに注意してください。

モジュール名の区別については、主に JSX および TSX コンポーネントで使用されます

Jsx および Tsx コンポーネント内に適用

JSX および TSX コンポーネントの場合TSX コンポーネントはスコープ付きスタイルを使用できないため、CSS モジュールが適切な選択です。

たとえば、スクリプトに h 関数を記述し、スタイル変数を直接使用します

   cell: (h, { col, row }) => {
      // console.log(style);
      return (
        <span class={style.name}>
          <img src={testImage} class={style[&#39;name-img&#39;]} />
          <span class={style[&#39;name-text&#39;]}>{row.name}</span>
        </span>
      );
    },

たとえば、render 関数

<script>
export default {
  props: {
    text: {
      type: String,
      default: &#39;&#39;
    }
  },
  render(h) {
    return <span class={this.$style.span1}>hello 222 - {this.text}</span>;
  }
};
</script>

<style module>
.span1 {
  color: blue;
  font-size: 40px;
}
</style>

:global selector

スコープまたはモジュールで global を使用する場合、

:global() により、括弧内で宣言されたセレクターが global にヒットできるようになります。つまり、そのクラス名はルールによってカプセル化されないため、スコープによって制限されません。

実際のプロジェクトで、使用されるコンポーネント ライブラリのデフォルト スタイルを変更したい場合、CSS モジュール ソリューションを使用する場合、次の方法でデフォルト スタイルを変更できます: global(),

ただし、次のようにする必要があります。クラスのカプセル化を外部で行うことが最善であることに注意してください。そうしないと、グローバル スタイル

に影響を与える可能性があります。

:ディープ アクション セレクター

ディープ アクション セレクターを使用すると、親コンポーネントのスタイルを子コンポーネントに浸透させることができます。原則として、子孫セレクターを使用します。

/* 转化前 */
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

/* 转化后 */
.a[data-v-f3f3eg9] .b {
  /* ... */
}

実際のプロジェクトでは、使用するコンポーネント ライブラリのデフォルト スタイルを変更したい場合、スコープ付き CSS ソリューションを使用する場合、深さセレクターを使用してデフォルト スタイルを変更できます。

深さの左右のセレクターを記述するいくつかの方法:

/deep/: Obsolete

'>>>': Sass pre を使用しない場合- プロセッサを使用する場合は

::v-deep を使用できます: Sass プリプロセッサを使用する場合は
• を使用します ただし、Vue3 では次のように改善されました。 :

深さセレクター /deep および >>> は非推奨です。代わりに :deep(.child-class)

を使用してください::v -deep

• :slotted() セレクターは、スロット内のスタイルを制御するための :slotted(selector) の使用をサポートします。 global() selector whenonly 一部のルールがグローバルに有効になる必要がある場合、グローバル スコープでスタイル タグを繰り返し宣言することはできませんが、global(selector) を使用してグローバル スタイルとして宣言することが許可されます。

• #概要

• ディープ アクション セレクター deep と宣言されたグローバル スタイルの違い深さアクション セレクターは、親コンポーネントを許可するだけです。子コンポーネント スタイルを制御しますが、グローバル スタイルはグローバルに有効です。
  # #vue.config.js で追加の構成が必要ですVue Loader はデフォルトでサポートしており、追加の構成は必要ありません構成されたクラスの名前付けに基づいて要素の一意の要素を生成しますrules スコープ分離を実現するクラス名要素のハッシュ属性をカスタマイズし、属性セレクターを使用して要素を選択し、スコープ分離を実現します style タグ module を宣言し、style タグ内でスコープ付き # を宣言して、他のモジュールのスタイルのインポートをサポートし、スタイルの組み合わせをサポートします/Use:global() を使用してスコープの分離を解除し、スタイルをグローバルに有効にします1. スタイルがスコープによって制限されないようにグローバル スタイルを定義できます。2深いアクションで選択できます ツールはサブコンポーネントにアクセスして、サブコンポーネントのスタイルを制御します

  CSS モジュール	スコープ付き CSS

  (学習ビデオ共有:

  vuejs 入門チュートリアル, 基本的なプログラミングのビデオ )

以上がVue3 学習による CSS モジュールとスコープの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。