一切福田,不離方寸,從心而覓,感無不通。

vue css中scoped

1、什么是scoped

vue组件中,在style标签中有一个属性,叫做scoped。当此标签拥有scoped属性的时候,该组件下的css样式只适用于本组件,而不会影响全局组件。这其实也相当于样式的模块化了。

2、scoped实现的原理

其实scoped中最重要的就是PostCSS,PostCSS是一种css的编译的工具。来看一下转译之前的代码:

编译前的代码:


 

编译之后的代码:

 

编译后,我们发现css中,PostCSS给所有的dom都添加了一个独一无二的动态属性,给css选择器也添加了一个对应的属性选择器,这样就可以让样式只作用于该属性的dom元素(组件内部的dom)。

 

from:https://www.cnblogs.com/marksir/p/11685350.html