css使用scoped之后样式失效问题

项目中的vue代码原本用的style标签来写css，现在想改成<style lang=scss scoped>，但是改完之后发现样式不对：
原来是：
将style改成scoped之后变成了：检查发现是之前定义的一些变量无法被识别，导致这些样式失效了：

原因是我在原来的css中添加了:root的全局样式代码，

所以问题的原因是：

• 作用域隔离​​：scoped 属性会为组件添加唯一属性标识（如 data-v-xxxxxx），这会限制 CSS 变量的作用域
• ​​变量定义位置​​：在 scoped 样式中定义的 CSS 变量默认只在当前组件有效
• ​​继承链中断​​：CSS 变量通常通过 :root 定义全局变量，但 scoped 样式会破坏这种继承关系

解决方式就是将这部分root的代码在组件外单独定义全局变量：

<style>
/* 全局变量定义（无scoped） */
:root {--shenlan: rgba(53, 86, 90, 1);--zhonglv: rgba(92, 176, 106, 1);--heilan: rgba(71, 85, 105, 1);/* 其他变量... */
}
</style><style lang="scss" scoped>
/* 带作用域的组件样式 */
.xuanzhuti {.button-continue {background-color: var(--zhonglv); /* 现在可以正常使用 */}
}
</style>

通过这种方法，就又成功实现了原先的效果：