踩坑笔记

180 阅读1分钟

vue组件中style使用scss语法后使用深度作用选择器

<style lang="scss" scoped>
.xxx{ }
</style>

例如使用了elementUI之后,需要修改部分局部样式,但是无法生效的时候,需要采用

  • 去除scoped,但是会存在污染全局样式的可能
  • 另写一个不包含scoped的style,但是可能污染别的部分使用到的样式文件
  • 深度作用选择器 >>>(作用普通的 css 样式),/deep/ (作用css预处理器的样式文件,但是可能语法错误),::v-deep(作用css预处理器的样式文件),

使用/deep/

<style lang="scss" scoped>
/deep/ .xxx{ }
</style>

使用::v-deep

<style lang="scss" scoped>
::v-deep .xxx{ }
</style>