重新安装依赖后，sass报警告Sass‘s behavior for declarations that appear after nested rules will be changing

今天拉取代码，重新执行pnpm i安装依赖后。发现终端出来了一堆sass的警告，

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 & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules\element-plus\theme-chalk\src\mixins_button.scss
159│ padding: $padding-vertical $padding-horizontal; │
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵
┌──> node_modules\element-plus\theme-chalk\src\button.scss 71 │ ┌ &

• & { 72 │ │ margin-left: 12px; 73 │ │ } │ └─── nested rule

原因

根据给的错误信息，在sass官网可以看到说明。sass新版本有破坏性变更。
https://sass-lang.com/d/mixed-decls

简单来说就是，sass为了迎合css的行为，对原来的嵌套规则了做了限定。但是很多组件库都是旧的写法。包括我们项目常用的elemnet-plus。可以在错误信息看到，很多指向的都是element的组件样式。

相关issues讨论 https://github.com/element-plus/element-plus/issues/17487

解决方法

知道原因后，我认为这样的变更覆盖面太广，很多组件库不可能第一时间做出更新，况且还有自己写的代码还有不再维护的组件库。所以要想解决这个问题，最好的办法就是降低sass的版本。

版本是在1.77.7开始的。 所以可以固定sass的版本在1.77.6之前。