::v-deep，css深度作用选择器

在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>
    

<li>

4.vue3使用 :deep()
举例：

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