Vue中的作用域CSS和CSS模块的区别

.btn {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 15px;
background: #fefefe;
margin: 5px;
}
</style>
<!-- App.vue -->
<template>
<div id="app">
<Button msg="Default Button" />
<Button :class="{[$style['btn-lg']]: isLg}" msg="Larger Button" />
<Button :class="{[$style['btn-sm']]: isSm}" msg="Smaller Button" />
<Button msg="Primary Button" :primaryClass="$style['btn-primary']" />
</div>
</template>
<script>
import Button from './components/Button'
export default {
name: 'app',
components: {
Button
},
data () {
return {
isLg: true,
isSm: false
}
}
}
</script>
<style module>
.btn-lg {
padding: 15px 30px;
}
.btn-sm {
padding: 5px;
}
.btn-primary {
background: rgb(54, 152, 244);
border-color: rgb(32, 108, 221);
color: #fff;
}
</style>

编译出来的效果如下图所示：

如果我们想要在JavaScript里面将独立的CSS文件作为CSS模块来加载的话，需要在 .css 文件名前添加 .module 前缀，比如：

<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中查看这个元素时，我们可以立刻知道它所属的是哪个组件。如果你够细心的话，可以看到编译出来的类名，都会以组件名为前缀，比如：

除了这个好处之外，还有另一个好处，即： 一切都变成显式的了，我们拥有了彻底的控制权 。