解决VUE组件内不能更改第三方插件样式

深度作用选择器（ >>> ）

严格来说，这个应该是vue-loader的功能。”vue-loader”: “^12.2.0”

在项目开发中，如果业务比较复杂，特别像中台或B端功能页面都不可避免的会用到第三方组件库，产品有时会想对这些组件进行一些UI方面的定制。如果这些组件采用的是有作用域的CSS，父组件想要定制第三方组件的样式就比较麻烦了。深度作用选择器( >>> 操作符)可以助你一臂之力。

<template>
    <div>
       <h1 class="child-title">
               如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作   </h1>
    </div>
</template>
<script>
    export default {
        name: 'child',
        data() {
            return {
            }
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .child-title {
        font-size: 12px;
    }
</style>

上面的child组件中 .child-title 的作用域CSS设定字体大小为12px，现在想在父组件中定制为大小20px，颜色为红色。

<template>
    <div>
       <child class="parent-custom"></child>
    </div>
</template>
<script>
    import Child from './child';
    export default {
        name: 'parent',
        components:{
            Child
        },
        data() {
            return {
            }
        }
    }
</script>
<style>
    .parent-custom  >>> .child-title {
        font-size:20px;
        color: red;
    }
</style>

效果妥妥的。但是别高兴太早，注意到上面的style使用的是纯css语法，如果采用less语法，你可能会收到一条webpack的报错信息。

<style lang="less">
.parent-custom {
     >>> .child-title {
        font-size:20px;
        color: red;
    }
}
</style>
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上有人提议支持>>>操作符，但本文使用的v2.7.3会有这个问题)

解决方案是采用的less的转义(scaping)和变量插值(Variable Interpolation)

<style lang="less">
    @deep: ~'>>>';
    .parent-custom {
         @{deep} .child-title {
            font-size:20px;
            color: red;
        }
    }
</style>

•  

对于其他的css预处理器，因为没怎么用，不妄加评论，照搬一下文档的话。

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。