vue 组件突破 scoped 限制，实现样式穿透

<style lang="stylus" type="text/stylus" scoped>
  /* >>>代表穿透，不受scoped的限制 */
  .wrapper >>> .swiper-pagination-bullet-active
    background #fff /* 轮播圆点被选中时的颜色 */
  .wrapper >>> .swiper-pagination-bullet
    width .12rem /* 轮播圆点的宽高 */
    height .12rem
  .wrapper
    overflow hidden
    width 100%
    height 0
    background #eee
    padding-bottom 26.67% /* 高度为宽度的26.67% */
  .swiper-img
    width 100%
  .swiper-pagination
    bottom .1rem
</style>

深度作用选择器 >>> 只作用于 css ，less 和 sass 中用 /deep/ ，突破 scoped 限制，让样式能影响外部的样式，实现样式穿透。一般在覆盖子组件样式时使用。

目前来看有四种：

1. >>>

2. /deep/

3. ::v-deep 【有时第二种会报错，这时需要使用第三种方式】

4.:deep() 【括号里跟选择器，如 :deep(.class-name)】

另外，在 css 中使用绝对路径需要加 '~' 符号（根据具体情况而定）。

如：background-image: url("~@/assets/img/a.png");