vue加scoped后就无法修改vant的UI组件的样式

为了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;
}
}

你可能感兴趣的:(前端,组件,原创)