Vue less 样式穿透 解决组件样式设置无效问题

2,456 阅读1分钟

问题由来

当我们在做一些大型项目使用组件库的时候,组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰,当我们想调整样式时,因为用到scoped来独立当前页面的style,会使到样式不生效。

然后我们发现!importent 不管用? 可是又不想去掉scoped怎么办,那就让less来帮你

解决

使用less时样式穿透覆盖。主要实现的方法是/deep/>>>两种,但是我更推荐深度选择器/deep/

因为>>>该方法对less的友好性较差,对stylus较好。

如何使用

<style scoped lang='less'> 在style标签内加上lang='less' 然后在你要改变的style样式前加上/deep/或者>>>就好啦

举个栗子

image.png