为了vue页面样式模块化,不对全局造成污染,每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担,如无法覆盖原有组件的样式。
解决方法:
使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件
以上的代码会编译成:
.van-tab[data-v-f3f3eg9] .van-ellipsis { /* … */ }
注意:如果你使用了Less或Sass等预处理器,可能无法>>>正确解析。在这些情况下,您可以使用组合/deep/或::v-deep组合 - 两者都是别名,>>>并且工作完全相同。
使用Less或Sass等预处理器的写法如下:
.van-tab {
/deep/ .van-ellipsis {
font-weight: bold;
}
}
本文探讨了Vue中样式模块化的实现方式,通过使用scoped属性防止样式污染,并介绍如何利用深度选择器解决scoped带来的样式覆盖难题。适用于前端开发人员。
304

被折叠的 条评论
为什么被折叠?



