如何处理在Vue中使用scoped后无法修改Vant UI组件样式的难题？

本文共计996个文字，预计阅读时间需要4分钟。

有时UI组件提供的默认样式不能满足项目需求，就需要我们对其进行修改。但发现加上scoped后，修改的样式不起作用。解决方法：使用深度选择器，将scoped样式中的选择器前加上一个额外的属性或类，以确保样式能够正确应用到组件内部。

有时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式不起作用。

解决方法：

使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件

<style scoped> .a >>> .b { /* ... */ } </style>

以上的代码会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

注意：如果你使用了Less或Sass等预处理器，可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。

使用Less或Sass等预处理器的写法如下：

.van-radio { /deep/ .van-radio__label { width: 500px; } }

补充知识：vue+vant移动端遇到的那些问题

1、项目引用了lib-flexible 跟px2rem-loader做适配，然后真机测试的时候发现字体在手机上显示的很小。