なぜvueに書いたcssが効かないのか

cssがグローバルに汚染されないように,各コンポーネントのstyleにscopedを追加し,実際にはスタイルのモジュール化を実現した.
vueにおけるscoped属性の効果は主にPostCSS翻訳によって実現される.翻訳前:

翻訳後:

vueはDOM構造およびcssスタイルに一意の重複しないタグを付けることで,スタイルのプライベート化モジュール化の目的を達成するために一意を保証する.現在のコンポーネントで呼び出されている他のコンポーネントでは、dataプロパティは最初のHTMLにのみ追加されます(たとえば、独自のコンポーネントでelementuiコンポーネントを使用するなど).
解決策:**
デプスセレクタ
**scopedスタイルのセレクタをサブコンポーネントに影響を与えるなど、「より深く」機能させたい場合は、>>>オペレータを使用します.Sassのようなプリプロセッサでは正しく解析できないものもあります>>>>.この場合、/deep/または::v-deepオペレータを使用して、代わりに->の別名を使用して、同じように正常に動作します.

上記のコードは次のようにコンパイルされます.

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

私が最終的に解決したのは、このようなスタイルです.