css Module （＜style module＞，$style.red的写法代表什么？）

一、css Module 简单写法

1. <style module> 这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。
2. 可在模板中通过一个动态类绑定来使用它，因为 $style 是一个计算属性，所以它也支持绑定class的 :class 对象/数组语法：

<template>
  <div>
    <p :class="$style.red">我是一段文字</p>
    <p>我也是一段文字</p>
  </div>
</template>
<style module>
.red {
  color: red;
}
</style>

二、在一个vue文件中，可定义多个style标签 ,可自定义的注入名称 （注入的名称作为计算属性）

1. <style module="cssModuleA"> 注入标识符cssModuleA ，注意，此时的计算属性名称则为cssModuleA
2. 值得注意的是：如下文件中，cssModuleA和cssModuleB 中有一个相同的类名，虽然 <p :class="cssModuleB.blue"> 明确的指定了是cssModuleB 模块的blue类，但这里并不会起作用，cssModuleA中的blue样式同样在该p标签上生效了。

<template>
  <div>
    <p :class="cssModuleA.red">我是一段文字</p>
    <p :class="cssModuleB.blue">我也是一段文字</p>
  </div>
</template>

<style module="cssModuleA">
/* CSS Modules： */
.red {
  color: red;
}
.blue {
  color: blue;
  border: 1px solid green; /* 该样式也会被用上 */
}
</style>
<style module="cssModuleB">
.blue {
  color: rgb(14, 187, 245); /* 覆盖了上面的blue样式 */
  font-weight: 600;
  font-size: 20px;
}
</style>

参考了：博客