css预处理文件使用scss嵌套写法深度选择器deep失效问题

项目场景：

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”