vue样式穿透

vue的style中设置scoped属性后，组件实现样式私有化。
但是该组件又使用的其他组件库时(vant,elementui,自定义等)，该组件的style中的样式，优先级低，不生效，这个时候需要使用样式穿透(作用得更深)。

vue中针对不同的样式类型(css,less,scss)有不同的样式穿透方法。

vue2

1. CSS

<style scoped>
    >>> .c1 .c2{
        color: green !important;
    }
</style>

2. less

<style scoped lang="less">
   	/deep/ .c1 .c2{
        color: green !important;
    }
</style>

3. scss

<style scoped lang=”scss“>
    ::v-deep .c1 .c2{
        color: green !important;
    }
</style>

vue3

1. CSS

<style scoped>
    :deep(.c1 .c2){
        color: green !important;
    }
</style>

2. less

<style scoped lang="less">
    ::v-deep(.c1 .c2){
        color: green !important;
    }
</style>

3. scss

<style scoped lang=”scss“>
    ::v-deep(.c1 .c2){
        color: green !important;
    }
</style>