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 モジュール、