scss解析/deep/以及＞＞＞深度选择器报错

1、>>>

如果vue的style使用的是css，那么则

<style lang="css" scoped>
.a >>> .b { 
   /* ... */ 
}
</style>

但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.

2、/deep/

<style lang="scss" scoped>
.a{
   /deep/ .b { 
      /* ... */ 
   }
} 
</style>

但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。
此时我们可以使用第三种方式

3、::v-deep

切记必须是双冒号

<style lang="scss" scoped>
.a{
   ::v-deep .b { 
      /* ... */ 
   }
} 
</style>

注：

若存在::v-deep未生效的情况，确认使用的文件是否为组件级，若为组件级，改为在调用该组件的页面设置::v-deep即可。 

4、:deep()

在vue3中项目中使用deep：

<style lang="scss">
.a{
 	:deep(.b){
        /* ... */
	}
}

</style>