<script> import barStyle from './src/style/bar.module.css' </script>
如果你是在项目中引入的是处理器文件也是如此，比如 .scss 文件：
<script> import fooSassStyle from './src/scss/foo.module.scss' </script>
如果你觉得这样比较麻烦，可以在 vue.config.js 文件中 css.modules 设为 true ：
// vue.config.js
module.exports = {
css: {
modules: true
}
}
注意，上面的示例创建的项目是使用Vue-cli 3创建的。如果是使用Webpack的话，需要根据Webpack的相关机制进行配制。
从上面的示例中我们可以看出。使用 module 和 scoped 不一样的地方就是在于所有创建的类可以通过 $style 对象获取。因此类要应用到元素上，就需要通过 :class 来绑定 $style 这个对象。它的好处是，当我们在HTML中查看这个元素时，我们可以立刻知道它所属的是哪个组件。如果你够细心的话，可以看到编译出来的类名，都会以组件名为前缀，比如：
除了这个好处之外，还有另一个好处，即： 一切都变成显式的了，我们拥有了彻底的控制权 。
总结
不管是CSS Modules还是作用域CSS，这两种方案都非常简单，易用。在某种程度上解决的是同样的痛点（CSS的痛）。那么你应该选择哪种呢？
scoped 样式的使用不需要额外的知识，给人舒适的感觉。它所存在的局限，也正它的使用简单的原因。它可以用于支持小型到中型的Web应用程序。在更大的Web应用程序或更复杂的场景中，对于CSS的运用，我们更希望它是显式的，更具有控制权。比如说，你的样式可以在多组件中重用时，那么 scoped 的局限性就更为明显了。反之，CSS Modules的出现，正好解决了这些问题，不过也要付出一定的代价，那就是需要通过 $style 来引用。虽然在 <template> 中大量使用 $style ，让人看起来很蛋疼，但它会让你的样式更加安全和灵活，更易于控制。CSS Modules还有一个好处就是可以使用JavaScript获取到我们定义的一些变量，这样我们就不需要手动保持其在多个文件中同步。
最后还是那句话， 任何解决CSS的方案，没有最好的，只有最合适的！ 我们应该根据自己的项目、场景和团队进行选择。当然，不管选择哪种方案，都是为了帮助我们更好的控制样式，解决原生CSS中存在的痛点。最后希望这篇文章对大家有所帮助。