<style module> 之间有什么区别？和 <style scoped>在 Vue 中？
官方文档( link1 ， link2 )仅说明 scoped使用 PostCSS 转换和 module使用 CSS Modules . 但两者之间真正的功能区别是什么？
(注意:如果他们使用的 PostCSS 转换是 that plugin ，它实际上使用的是 CSS 模块...)
最佳答案
它们都是处理作用域 CSS 的方式，并且做的事情几乎相同。不过，他们处理它的方式有点不同。
Vue 中的作用域样式只是普通的 CSS，但有一些额外的类添加了作用域。它与 shadow DOM 相似，因为它将范围限定在一个组件中。这种方法的好处是您可以像往常一样继续编写 CSS，但如果需要的话，您可以获得一些额外的作用域。
CSS Modules 的不同之处在于它使用 Webpack 根据 block 和类编译唯一的类名。它是一种自动创建独特的 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 的人。在我个人看来，我会坚持使用更简单的(我会让你决定是哪一个)
关于vue.js - Vue 中的模块样式和作用域样式有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50464111/