/deep/和>>>和::v-deep

在vue项目中，修改第三方库的样式踩坑，<style lang="scss" scoped></style>中修改第三方样式不生效，全局修改又可能会影响其他地方的样式~纠结~~，终于让我找到了解决办法,记录一下。。。。

1. >>> 如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改
   举例:

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

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

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

3. ::v-deep 如果使用了预处理器(sass,stylus等等)都可以使用::v-deep
   举例：

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

   作者：小小小小彭
   链接：https://juejin.cn/post/6862997520583393287
   来源：稀土掘金
   著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。