vue中样式穿透使用

在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped

1、stylus的样式穿透 使用 >>>

备注: 不太推荐使用这种方式,据说有点问题！

.wrapper >>> .swiper-pagination-bullet-active {
   		background: #fff
}

2、sass 和 less 的样式穿透

这俩个常用的样式穿透的方式 有俩种 分别是 /deep/ 与 ::v-deep

/deep/ .ant-tabs {
    //vue2写法
    width: 100%;
    height: 100%;
  }
  :deep(.ant-tabs) {
    // vue3写法
    width: 100%;
    height: 100%;
  }

::v-deep 与 /deep/ 都是深度选择器(样式穿透)，都能实现对组件内部的样式修改

注意: 在写之前保证嵌套层级正确