css Module (<style module>, what does the wording of $style.red represent?)

1. Simple writing of css Module

1. <style module>This modulecharacteristic Guidelines Vue Loader named as $stylecalculated attribute, CSS Modules injected into the local object assembly.
2. It can be used in the template by a dynamic class bind it as $stylea calculated property, it also supports binding class of :classobject / array syntax:

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

2. In a vue file, multiple style tags can be defined, and the injection name can be customized (the injected name is used as a calculated attribute)

1. <style module="cssModuleA"> Inject the identifier cssModuleA, note that the name of the calculated attribute at this time is cssModuleA
2. It is worth noting: the following documents, cssModuleA and cssModuleB in the same class have a name, although <p :class="cssModuleB.blue">explicitly specify the class cssModuleB module is blue, but here and not work, blue style cssModuleA the same label in the p It took effect.

<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>

Referenced: Blog