网站备注查询,阜新百姓网,滕州盛扬网络公司网站建设推广,中文购物网站模板项目中的vue代码原本用的style标签来写css#xff0c;现在想改成style langscss scoped#xff0c;但是改完之后发现样式不对#xff1a; 原来是#xff1a; 将style改成scoped之后变成了#xff1a;检查发现是之前定义的一些变量无法被识别#xff0c;导致这些样…项目中的vue代码原本用的style标签来写css现在想改成style langscss 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);/* 其他变量... */
}
/stylestyle langscss scoped
/* 带作用域的组件样式 */
.xuanzhuti {.button-continue {background-color: var(--zhonglv); /* 现在可以正常使用 */}
}
/style通过这种方法就又成功实现了原先的效果
