Vue でスコープ付き CSS を使用することと CSS モジュールを使用することの違いは何ですか?

今回は、スコープ付き CSS と Vue モジュール での CSS の使用の違いと、Vue でスコープ付き CSS と CSS モジュールを使用する際の 注意事項 についてお届けします。実際のケースを見てみましょう。

スコープ付き CSS

公式ドキュメント

スコープ付き CSS は、実行中の Vue プロジェクトで直接使用できます。

使用法:

<style scoped>
h1 {
 color: #f00;
}
</style>

scoped を使用してローカルスタイルを分割したコンパイル結果は次のとおりです:

h1[data-v-4c3b6c1c] {
 color: #f00;
}

つまり、要素に独自の属性を追加して区別します。

欠点

1. ユーザーが他の場所で同じクラス名を定義した場合、コンポーネントのスタイルに影響を与える可能性があります。

2. CSS スタイル

優先度 の特性に従って、スコープ指定された処理により各スタイルの重みが増加します。

理論的には、このスタイルを変更したい場合は、このスタイルをカバーするためにより高い重みが必要になります。

そのため、スコープ付きを含むサードパーティのプラグインを

参照する場合、スタイルを変更する必要がある場合はグローバルに変更する必要があり、重みの問題に注意する必要があり、0.0 では !重要 を使用する以外に選択肢はありません。 。 3. コンポーネントに他のコンポーネントが含まれている場合、現在のコンポーネントの data 属性のみが他のコンポーネントの最も外側のタグに追加されます。

したがって、一般に、親コンポーネントがスコープされている場合、そのコンポーネントは、そのコンポーネントが含まれる子よりも優れています。独自のスタイルを設定します。最も外側のタグを除くコンポーネント内の内側のタグは重みが低く、スタイルには影響しません。

しかし、次のメソッドの影響を受ける可能性もあります:

第 4 に、スコープを指定すると、

タグ セレクター のレンダリングが何倍も遅くなります 公式は次のようないくつかの予防措置を講じています:

us タグ セレクターを使用するとスコープ付きではパフォーマンスが大幅に低下しますが、クラスまたは ID を使用するとパフォーマンスが低下しないことがわかります。

cssモジュール公式ドキュメント

cssモジュールを有効にするには、css-loader設定を追加する必要があります。詳細については、ドキュメントの実装を参照してください。

注 style-loader を使用している場合、設定を有効にするには、ドキュメントの説明に従って vue-style-loader に変更する必要があります。

2 つの違いはここで見つけることができます。 vue-style-loader

は次のように使用されます:

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

モジュールを使用した結果は次のようにコンパイルされます:

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

css モジュールが直接使用されていることがわかります。ユーザー設定クラスを除くクラス名を置き換えます。名前がコンポーネントのスタイルに影響を与える可能性があります。

このように、$style.red は変数として使用でき、次のように js で使用できます:

<script>
export default {
 created () {
 console.log(this.$style.gray)
 // -> "gray_3FI3s6uz"
 // 一个基于文件名和类名生成的标识符
 }
}
</script>

さらに使用したい場合は、モジュールにさらに多くのバインディングと $style があることがわかります。エレガントなので、この vue-css-modules を見てください。

キーフレームでCSSモジュールを使用する際の問題

アニメーション

アニメーションのキーフレームを処理するには、CSSモジュールを使用してください。アニメーション名を最初に記述する必要があります。

animation: ani 1s; は正常にコンパイルできますが、animation: 1s ani; は期待どおりにコンパイルされないため、CSS パラメーターの適切な記述順序を開発することも重要です。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

webpack+react開発環境を構築する方法

Node.jsバッファーの使用方法の詳細な説明

Reactファミリーのバケット環境を構築する方法

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