Vuescoped

何为Scoped CSS

在Vue文件中的style标签上有一个特殊的属性&＃xff0c;scoped。当一个style标签拥有scoped属性时&＃xff0c;它的css只作用于当前组件中的元素。这样就可以使组件的样式不相互污染。它通过使用PostCSS来实现以下转换&＃xff1a;

转换结果&＃xff1a;

PostCSS给一个组件中的所有dom添加了一个独一无二的属性&＃xff0c;给css选择器额外添加了一个对应的属性选择器&＃xff0c;来选择组件中的dom&＃xff0c;这种做法使得样式只作用于含有该属性的dom元素。

总结为&＃xff1a; scoped的渲染规则为&＃xff1a;

1.给html的dom节点添加一个不重复的data属性&＃xff08;如&＃xff1a; data-vf3f3eg9&＃xff09;来标识这个dom元素&＃xff1b;

2.在编译后生成的css选择器的末尾加上一个当前选中元素的data属性&＃xff08;如&＃xff1a; [data-vf3f3eg9]&＃xff09;来私有化样式。

scoped穿透

有时我们引入第三方组件时&＃xff0c;需要在局部组件中修改第三方组件的样式&＃xff08;即你希望 scoped 样式中的一个选择器能够作用得“更深”&＃xff09;&＃xff0c;例如影响子组件&＃xff0c;但又不想去除scoped属性造成组件之间的样式覆盖。这时你可以使用 >>> 操作符来实现穿透scoped&＃xff1a;

上面代码会编译为&＃xff1a;

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

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名&＃xff0c;同样可以正常工作 。

还有其他方式来修改引入第三方组件的样式&＃xff1a;

1. 不适用scoped属性&＃xff1b;

2. 混用本地和全局样式&＃xff0c;在一个组件中同时使用有scoped和非scoped样式&＃xff1b;

    

参考资料&＃xff1a; Vue Loader ---Scoped CSS

Vue中的scoped和scoped穿透