问题：不管是 npm run dev 还是 npm run build时 都会产生如下警告信息

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

原因：是由于vue3项目在css代码中使用了 ::v-deep 样式穿透 写法问题造成的

1、首先这是一个vue3脚手架搭建的项目中 css使用的是less预处理器 vant ui 加上scoped属性当前组件下有效 <style lang="less" scoped></style>
2、在使用vant组件时，想自定义某个样式时发现没有作用，于是乎就使用了样式穿透 ::v-deep,这样写可以修改样式，可以正常运行打包等，但是控制台会输出警告信息。
3、信息大概意思就是 现在要  **Use :deep(<inner-selector>)** 这种写法替代::v-deep 

解决过程

1、光看提示信息 :deep .class 这样去写，发现还是会有这个提示信息
2、正确的写法是 *:deep(.class) *

注意事项

穿透的选择器要使用括号包起来，且 :deep 和 （.class） 直接一定不要有空格。
:deep (.class) 这样还是有提示信息
:deep .class 这样也不行
:deep(.class) 正确了

知识巩固 学习vue3 原文档

文档地址：https://cn.vuejs.org/api/sfc-css-features.html#scoped-css

子组件的根元素

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

深度选择

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

<style scoped> 
.a :deep(.b) { 
    /* ... */ 
} 
</style>

注意点：通过 `v-html` 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。