Vue 开发——样式穿透

如果项目使用的 CSS 书写的样式：

.box >>> .a {
}

项目中用到了预处理器 scss 、sass、less 操作符>>>可能会因为无法编译而报错 。可以使用/deep/。

<style lang='scss' scoped>
/*/deep/后开始是子组件的类名*/
.a {
  /deep/ .b {
    
  }
}
.a /deep/ .b {
  .c {
    
  }
}
</style>

使用::v-deep也可以：

<style lang='scss' scoped>
.a {
  ::v-deep .b {
    
  }
}
.a ::v-deep .b {
  
}
</style>

在 vue3 版本中::v-deep已经弃用，使用:deep代替。