vue不生效打包样式_用深度选择器＞＞＞（/deep/）解决vue调用第三方组件库覆盖样式不生效问题...

前言

在使用vue构建项目的时候&＃xff0c;引用了第三方组件库&＃xff0c;只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面&＃xff0c;但是此时再修改组件样式不起作用。

scoped的实现原理

vue中的scoped属性的效果主要通过PostCSS转译实现&＃xff0c;如下是转译

通过 >>> 穿透scoped

iview中需要在组件上使用i-class声明第三方组件类名

有些Sass 、Less之类的预处理器无法正确解析 >>>。可以使用 /deep/操作符( >>> 的别名)

实例

注意&＃xff1a;
穿透方法实际上违反了scoped属性的意义。而且在vue中过多使用scoped导致页面打包文件体积增大。通常能写在index中的样式尽量写在index中&＃xff0c;我们可以通过在index样式中通过外层组件添加唯一class来区分组件&＃43;第三方样式来实现实现了类似于scoped的效果&＃xff0c;又方便修改各种第三方组件的样式。

小伙伴们今天的学习就到这里了&＃xff0c;如果觉得本文对你有帮助的话&＃xff0c;欢迎转发&＃xff0c;评论&＃xff0c;收藏&＃xff0c;点赞&＃xff01;&＃xff01;&＃xff01;

每天学习进步一点点&＃xff0c;就是领先的开始。如果想继续提高&＃xff0c;欢迎关注我&＃xff0c;或者关注公众号”祯民讲前端“。大量前端技术文章&＃xff0c;面试资料&＃xff0c;技巧等助你更进一步&＃xff01;