Módulo css (<módulo de estilo>, ¿qué representa la redacción de $ style.red?)

1. Escritura simple del módulo CSS

1. <style module>Esta modulecaracterística de Guidelines Vue Loader nombró como $styleatributo calculado, módulos CSS inyectados en el ensamblaje del objeto local.
2. Puede ser utilizado en la plantilla por una clase dinámica vincularlo como $styleuna propiedad calculada, también admite la clase de vinculación de :classsintaxis de objeto / matriz:

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

2. En un archivo vue, se pueden definir varias etiquetas de estilo y se puede personalizar el nombre de la inyección (el nombre inyectado se usa como un atributo calculado)

1. <style module="cssModuleA"> Inyecte el identificador cssModuleA, tenga en cuenta que el nombre del atributo calculado en este momento es cssModuleA
2. Vale la pena señalar: los siguientes documentos, cssModuleA y cssModuleB en la misma clase tienen un nombre, aunque <p :class="cssModuleB.blue">especifican explícitamente que la clase cssModuleB módulo es azul, pero aquí y no funciona, azul estilo cssModuleA la misma etiqueta en el p Sucedió efecto.

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

Referenciado: Blog