项目场景：
vue3 + vite + elementPlus项目，为了保持项目中页面风格的一致性，在项目中使用了css预处理器
问题描述
1. 需求场景
项目中使用了css预处理器，在vite.config.ts文件中定义如下：
css: {
// css预处理器
preprocessorOptions: {
scss: {
// 引入 common.scss 这样就可以在全局中使用 common.scss中预定义的变量了
// common.scss是自己创建的文件
additionalData: '@import "@/style/common.scss";'
}
}
}
在该scss文件中，可定义变量，也可直接写样式，最终会应用到全局。
而由于项目需要，需要修改一些elementPlus组件的原生样式，主要修改el-input这类表单组件的边框弧度，使之成为圆角，如下图：
基本所有的el-input都要应用该样式，因此便在common.scss文件中添加了下列代码：
// 全局修改el-input原生样式圆角
:deep(.el-input .el-input__wrapper) {
border-radius: 0.6rem 0.6rem 0.6rem 0.6rem !important;
}
2、问题复现
而由于部分el-input使用了append插槽，导致样式变成了这样：
因此这部分的el-input的样式应改为：
:deep(.el-input .el-input__wrapper) {
border-radius: 0.6rem 0 0 0.6rem !important;
}
// append插槽样式
:deep(.el-input .el-input-group__append) {
border-radius: 0 0.6rem 0.6rem 0 !important;
}
便可得到以下效果：
由于这些el-input都是应用于查询的，而这些el-input我都写在了一个class为searchGroup的div里，因为多个页面都是相同样式，因此理所当然地写在了common.scss中，如下：
.searchGroup{
//这里有部分searchGroup的样式
xxxx
xxxx
:deep(.el-input .el-input__wrapper) {
border-radius: 0.6rem 0 0 0.6rem !important;
}
// append插槽样式
:deep(.el-input .el-input-group__append) {
border-radius: 0 0.6rem 0.6rem 0 !important;
}
}
但是但是但是！
问题就这么出现了，部分页面的searchInput是有效的，而部分页面的searchInput却仍是之前的效果！！！
其他的全局样式仍然是有效果的，而部分页面的searchInput也是有效果的，这就有点离谱了！
3、问题排查
首先排查了浏览器缓存的影响，又排查了其他样式优先级的影响，发现也不是，因为我在那些失效的vue文件里根本就没定义样式，就像这样：
<style lang="scss" scoped>
</style>
一开始觉得没有办法了，只能在这些失效的searchInput的vue文件的style里挨个挨个再定义一下了，果然，理所当然地生效了，但是还是想排查一下，就注释掉了其vue文件中新加的style样式，想去F12再找找原因
<style lang="scss" scoped>
// .searchGroup {
// :deep(.el-input .el-input__wrapper) {
// border-radius: 0.6rem 0 0 0.6rem !important;
// }
// // append插槽样式
// :deep(.el-input .el-input-group__append) {
// border-radius: 0 0.6rem 0.6rem 0 !important;
// }
// }
</style>
转折来了，回到页面一看，刚刚失效的页面又正常了，又生效了！
但是自己明明已经将样式注释掉了呀！
于是尝试性地将代码改成了下面这样：
<style lang="scss" scoped>
//
</style>
样式依然有效！！！
依然有效！！
有效！
原因分析：
原因还没搞清楚，仅在此先记录
原因可能是样式作用域的生成或者预处理器优化等影响，因为style里啥都没写，但是也只是猜想，还没有搞清楚具体原因。
仅先在此记录一下，因为当时碰到这个问题的时候，上网查也没查到什么相似的问题，希望自己的分享能给其他人带来一些帮助
解决方案：
其实有一个很简单的解决方案，不用每个vue文件里都写对应的样式，只需要在common.scss里写成下面这样：
修改后：
:deep(.searchGroup .el-input .el-input__wrapper) {
border-radius: 0.6rem 0 0 0.6rem !important;
}
// append插槽样式
:deep(.searchGroup .el-input .el-input-group__append) {
border-radius: 0 0.6rem 0.6rem 0 !important;
}
修改前：
.searchGroup{
//这里有部分searchGroup的样式
xxxx
xxxx
:deep(.el-input .el-input__wrapper) {
border-radius: 0.6rem 0 0 0.6rem !important;
}
// append插槽样式
:deep(.el-input .el-input-group__append) {
border-radius: 0 0.6rem 0.6rem 0 !important;
}
}
大家可以自行对比一下，其实就是把深度选择器拿到最外面，并且在筛选条件里多加了一个“.searchGroup”
