六、报[@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead.”

        Today, when I was using the vscode editor, I found a yellow prompt. I wanted to solve this, so I came up with this blog.

       Not much nonsense, first take a screenshot

      Originally, this error report did not affect the operation of the project, but it looked ugly, so I wanted to fix it.

first 

        Now interpret the meaning of this passage.

[@vue/compiler-sfc] >>> and /dep/combinator are deprecated. Use: deep() instead.

Then let's search globally for /deep/

secondly

Change /deep/ to the form of :deep(), let's write like this

<style lang="less" scoped>
  .role-select {
    margin-bottom: 16px;
  }
  .role-transfer {
    // 原先
    // /deep/.ant-transfer-list {
    //   height: 300px;
    //   width: 45%;
    // }

    //改为
    ::v-deep(.ant-transfer-list) {
      height: 300px;
      width: 45%;
    }
  }
</style>

 After recompiling, this problem will not occur

 

again

In fact, there is a second way of writing, :deep is also possible

<style lang="less" scoped>
  .role-select {
    margin-bottom: 16px;
  }
  .role-transfer {
    // /deep/.ant-transfer-list {
    //   height: 300px;
    //   width: 45%;
    // }
    :deep(.ant-transfer-list) {
      height: 300px;
      width: 45%;
    }
  }
</style>

This is a small bug, just record it, and hope to provide you with some help during the development process.