VUEコンポーネント内でサードパーティ製プラグインスタイルを変更できないことを解決

深度セレクタ(>>>>)
厳密に言えば、これはvue-loaderの機能であるはずです.」vue-loader”: “^12.2.0”
プロジェクト開発では、ビジネスが複雑な場合、特に中台やBエンドの機能ページのようにサードパーティのコンポーネントライブラリが使用されることは避けられません.製品は、これらのコンポーネントをUIでカスタマイズしたい場合があります.これらのコンポーネントが役割ドメインのあるCSSを採用している場合、親コンポーネントがサードパーティ製コンポーネントのスタイルをカスタマイズするのは面倒です.[深さ](Depth)セレクタ(>>>>>オペレータ)は、あなたの力を助けることができます.

    export default {
        name: 'child',
        data() {
            return {
            }
        }
    }

上のchildコンポーネントでは.child-titleの役割ドメインCSSはフォントサイズを12 pxに設定し、親コンポーネントでサイズ20 pxにカスタマイズし、色を赤にしたいと考えています.

    import Child from './child';
    export default {
        name: 'parent',
        components:{
            Child
        },
        data() {
            return {
            }
        }
    }

効果は妥当である.しかし、あまり早く喜ばないでください.上のstyleは純粋なcss文法を使っていることに気づきました.less文法を採用すると、webpackのエラーメッセージが届くかもしれません.

ERROR in ./~/css-loader!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-960c5412","scoped":false,"hasInlineConfig":false}!./~/postcss-loader!./~/less-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/parent.vue
Module build failed: Unrecognised input
 @ /src/components/parent.vue (line 22, column 6)
 near lines:
   .parent-custom {
        >>> .child-title {
           font-size:20px;

上のエラーメッセージは実はless文法が知らない>>>>.(lessのgithub issueでサポートが提案されています>>>オペレータですが、本稿で使用するv 2.7.3ではこの問題があります)
解決策はlessのエスケープ(scaping)と変数補間(Variable Interpolation)を採用することである.

 

他のcssプリプロセッサについては、あまり役に立たないので、コメントをつけずに、ドキュメントをそのままコピーします.
Sassのようなプリプロセッサでは正しく解析できないものもあります>>>>.この場合、/deep/オペレータを使用して代わりに使用できます.これは>>>の別名で、同じように正常に動作します.