Vue使用深度选择器在scoped中修改第三方样式

问题:

当我们在写业务时, 需要修改当前页面elementUI的样式, 但是为了不想修改的样式影响到别的组件, 需要添加scoped, 但是当我们添加了scoped后, 第三方样式的class后也会被加上hash值, 该怎么处理?

解决:

使用深度选择器 >>> :

<style scoped>
.a >>> .b { /* ... */ }
</style>

上面这么写将会编译成:

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

**注意: ** 如果使用CSS预处理器, 会无法编译 >>>, 我们可以使用/deep/ 或者 ::v-deep 来代替 但/deep/在dart-sass中使用会报错

参考资料

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

https://github.com/dart-lang/angular/issues/454