Vue.jsコンポーネントで重複するスタイルを避けることはできますか？

Question

私はVue（そして単一のファイルコンポーネントのコンセプト）を使い慣れていて、自分のアプリが生成されたときにCSSがどのようにコンパイルされているかわかりません。

私はすべてのSCSSがプロジェクト用にコンパイルされているので、これを自分のコンポーネントにプルするパターンライブラリがあります。私はmixinsと変数をグローバルにロードできることを知っています。そして、そのコンポーネントをスタイルするために使用する必要があるならば、他のブロックの手を加えようと考えています。

私は何をされる心配：

私は複数のコンポーネントで同じスタイル定義を使用し続ける場合は、これらをコンパイルCSSに複製されますか？

もしそうなら、どのように避けることができますか？例： 10個のコンポーネントに 'headings.scss'をインポートします。コンパイル済みのCSSに 'headings.scss'ファイルのインスタンスが10個ありますか？

私は意味があることを望みます！ここではもっと明快さが必要です。

Answer 1

いいえ、重複があります。しかし、あなたはvuejs webpackテンプレートを使用している場合、生産ビルドのCSSはcssnanoで処理され、重複したCSSを破棄します。

注：正確な重複のみが破棄されます。