vue的组件库 , 如vant，elementUI， iview等都可能自定义样式修改

一、问题描述：项目中用到了 elementui，如果使用预处理器 scss, sass,less , 修改样式可能修改不掉, 而且这种需求出现的频率非常高。但如果去掉scoped话又会影响全局样式。
二、问题解决：样式穿透的方式操作

• 疑问：那么究竟什么时候使用 >>> 、 /deep/ 和 ::v-deep
• 1.1、>>> 如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改

<style scoped>
    /*编译前*/
    .a >>> .b { 
     /* ... */
    }
      /*编译后*/
      .a[data-v-f3f3eg9] .b { /* ... */ }
</style>

• 1.2 、@deep: ~">>>";

<style scoped>
   @deep: ~">>>";
    /*编译前*/
    @{deep}.a { 
          /* ... */
     }
    @{deep}.b { 
          /* ... */
     }
      /*编译后*/
      .[data-v-4c0f2e01] a{ /* ... */ }
      .[data-v-4c0f2e01] b{ /* ... */ }
</style>

• 2、/deep/ 项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
  注意：vue-cli3以上版本不可以

<style scoped>
    /*用法1*/
      .a {
       /deep/ .b { 
        /* ... */
       }
      } 
      /*用法2*/
      .a /deep/ .b { 
        /* ... */
       }
</style>

• 3、::v-deep 如果使用了预处理器都可以使用 ::v-deep

<style scoped>
    /*用法1*/
    .a{
     ::v-deep .b { 
      /* ... */
     }
    } 
    /*用法2*/
    .a ::v-deep .b {
      /* ... */
    }
    </style>

注意：dart-sass 不支持/deep/和>>>的写法，只能用::v-deep，node-sass没问题。所以，如果您的/deep/不起作用，可以，可以换::v-deep试试。/deep/在某些时候会报错，::v-deep更保险并且编译速度更快。