vue 文件加上scoped属性后不能覆盖UI组件的原有样式

vue 文件加上scoped属性后不能覆盖UI组件的原有样式

为了vue页面样式模块化，不对全局造成污染，一般每个页面的style标签都加上scoped属性，表示该style样式只在当前的页面生效，不会泄漏到子组件或其他页面中。
但是scoped也会造成一些额外的负担，比如无法覆盖原有组件的样式。
此时我们可以使用 /deep/ 或者>>>。

<style scoped lang="less">
    .fault-predict {
        /deep/ .ivu-tabs-nav .ivu-tabs-tab {
            font-size: 14px;
            padding: 8px 14px;
            color: #333;
            font-weight: 500;
        }
    }
</style>

或者

<style scoped >
    .fault-predict  >>> .ivu-tabs-nav .ivu-tabs-tab {
            font-size: 14px;
            padding: 8px 14px;
            color: #333;
            font-weight: 500;
    }
</style>

两者比较

/deep/可以在 sass或者less中生效，但是深度选择器在sass/lass中时，无法生效。