Vue中模块和作用域样式有什么区别？

Question

<style module>和<style scoped>Vue有什么区别？

官方文档(link1,link2)仅声明scoped使用PostCSS转换并module使用CSS模块.但两者之间真正的功能区别是什么？

(注意:如果他们使用的PostCSS转换是该插件,它实际上使用CSS模块......)

Answer 1

它们都是处理范围CSS的方式,并且几乎完全相同.他们处理它的方式有点不同.

Vue中的Scoped样式只是普通的CSS,但是添加了一些额外的类作用域.它类似于影子DOM,因为它会将内容范围扩展到组件.这种方法的好处是你可以继续编写CSS,但是你可以获得一些额外的范围,如果这是你想要的.

CSS模块的不同之处在于它使用Webpack根据块和类编译唯一的类名.它有点自动创建独特的BEM类.它具有CSS之上的许多附加功能(您不必使用它).

CSS模块不是特定于Vue的东西,因此如果您了解到可以将它应用于可以导入CSS模块的任何构建.然而,Vue CSS范围很简单,如果你知道CSS(几个选择器都是真的),就没有什么可以学习的了.

CSS Modules类将由webpack构建为.{component}__{className}__{randomHash}.

Scoped Vue CSS将由postcss构建为.{className}[data-v-{componentHash}].将componentHash被施加到该组件中的每一个元素.

这两种方法都是基于哈希和类名编译CSS.Scoped CSS还为HTML添加了额外的数据属性.CSS模块使用javascript来管理样式.

虽然他们都做了几乎相同的事情,但对我而言,唯一真正的区别在于如何创建类.我想CSS模块应该更高效,因为所有类的特异性较低,但它实际上取决于编写CSS的人.在我个人看来,我会坚持使用更简单的一个(我会让你决定哪一个)