vue3版本升级出现的问题-CSS篇::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞) in

深度选择器失效

原先用的深度选择器 deep 是已经被遗弃的写法，最好用新的写法来代替。
以警告形式抛出，不影响项目代码运行。

问题报错： v-deep usage as a combinator has been deprecated. Use :deep()

旧版本样式穿透写法

::v-deep .abc{
}

:deep .abc{
}

所以改成新的语法

//新版本样式穿透写法
:deep(.abc){
}

重新启动就不会报错了

SCSS的问题

问题报错： Deprecation Warning: Sass’s behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

它的意思，以前嵌套之后写的样式不再推荐了。
在未来的版本中，Dart Sass 将更改为 匹配普通 CSS 嵌套生成的排序。

解决方案两种办法

/*
这种就会出现上面的错误提示，因为font-weight: normal;写在下面了
*/ 
.example {
  color: red;
  
  a {
    font-weight: bold;
  }
	font-weight: normal;
}

解决方案一

/*
把font-weight: normal;全部放到最上面，子嵌套在线
*/ 
.example {
  color: red;
  font-weight: normal;
  a {
    font-weight: bold;
  }
}

解决方案二

/*
通过 &包裹一层即可
*/ 
.example {
  color: red;
  
  a {
    font-weight: bold;
  }
 & {
 font-weight: normal;}
}