web-dev-qa-db-ja.com

Vueのモジュールスタイルとスコープスタイルの違いは何ですか?

違いは何ですか <style module>および<style scoped> Vueで?

公式ドキュメント( link1link2 )は、scopedがPostCSS変換を使用し、moduleCSSモジュール を使用することのみを述べています=。 しかし、両者の実際の機能の違いは何ですか?

(注:彼らが使用するPostCSS変換が そのプラグイン の場合、実際にはCSSモジュールを使用しています...)

10
Robert Kusznier

どちらもスコープ付きCSSの処理方法であり、ほとんど同じことを行います。彼らがそれを処理する方法は少し異なりますが。

Vueのスコープ付きスタイルは通常のCSSですが、スコープが追加されたいくつかの追加クラスがあります。コンポーネントにスコープする点でシャドウDOMに似ています。このアプローチの利点は、通常の方法でCSSを作成する方法について説明しますが、必要に応じてスコープを追加できます。

CSSモジュールは、Webpackを使用して、ブロックとクラスに基づいて一意のクラス名をコンパイルするという点で異なります。ユニークなBEMクラスを自動的に作成するようなものです。 CSSを超える多くの追加機能があります(使用する必要はありません)。

CSSモジュールはVue特定のものではないので、CSSモジュールをインポートできる任意のビルドにそれを適用できることを学んだなら、しかしVue CSSスコープはCSSを知っていれば、他に学ぶことは何もないほど単純です(いくつかのセレクターはすべて本当にです)。

CSSモジュールクラスは、.{component}__{className}__{randomHash}としてwebpackによって構築されます。

Scoped Vue CSSはpostcssによって.{className}[data-v-{componentHash}]として構築されます。componentHashはそのコンポーネントのすべての要素に適用されます。

どちらの方法でも、ハッシュとクラス名に基づいてCSSをコンパイルしています。スコープ付きCSSは、スコープを設定するために、HTMLに追加のデータ属性を追加しています。 CSSモジュールは、スタイルを管理するためにもう少しJavaScriptを使用しています。

どちらもほとんど同じことをしていますが、私にとって唯一の真の違いは、クラスの作成方法です。すべてのクラスの特異性が低いため、CSSモジュールの方がパフォーマンスが高いはずですが、CSSを書いている人によって異なります。私の個人的な意見では、より単純なものに固執します(どちらにするかはあなたに任せます)

22
Adam Hughes