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

Question

Vue中<style module>和<style scoped>之间的区别是什么？

官方文档（link1，link2）仅说明scoped使用PostCSS转换而module使用CSS Modules。 但两者之间真正的功能区别是什么？

（注意：如果他们使用的PostCSS转换是that plugin，它实际上使用CSS模块......）

Answer 1

他们既处理范围内的CSS，又做同样的事情。他们处理它的方式有点不同。

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

CSS模块的不同之处在于它使用Webpack根据块和类编译唯一的类名。它可以自动创建独特的BEM类。它在CSS之上有很多额外的功能（你不必使用它）。

CSS模块不是特定于Vue的东西，因此如果您了解到可以将它应用于可以导入CSS模块的任何构建。然而，Vue CSS范围很简单，如果你知道CSS（几个选择器都是真的），那么除了学习之外还没有什么可以学习的东西。

CSS模块类将由webpack构建为.{component}__{className}__{randomHash}。

Scoped Vue CSS将由postcss构建为.{className}[data-v-{componentHash}]。 componentHash将应用于该组件中的每个元素。

这两种方法都是基于哈希和类名编译CSS。 Scoped CSS还为HTML添加了额外的数据属性，以便它进行范围界定。 CSS模块使用javascript来管理样式。

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