Vue使用深度选择器在scoped中修改第三方样式
2020-03-19 本文已影响0人
ZZES_ZCDC
问题:
当我们在写业务时, 需要修改当前页面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
