update - vue css loader

css-loader localIdentName: ¿es necesario un hash para la unicidad?

Question

Css-loader README sugiere que localIdentName se configure en

''[path][name]__[local]--[hash:base64:5]''

¿Es necesario el sufijo hashing? ¿Sería todavía único como esto?

''[path][name]__[local]''

¿Por qué o por qué no?

El hecho de que el # 3 sea una opción en esta discusión de GitHub Issue me lleva a creer que puede no ser necesario.

Answer 1

El localIdentName se usa junto con las opciones de los modules :

{
  loader: ''css-loader'',
  options: {
    modules: true,
    localIdentName: ''[path][name]__[local]--[hash:base64:5]''
  }
}

Genera nombres de clase más largos como:

.src-styles-main__world-grid--R7u-K
 ---------------  ----------  -----
      path,name     local      hash

.src-styles-main__world-grid
 ---------------  ----------
      path,name     local

Por lo tanto, el hash no sería necesario siempre y cuando la ruta, el nombre y el nombre de la clase generen ID únicos. Es muy poco probable que el hash sea necesario.

Answer 2

¿Es necesario el sufijo hashing?

Sí

¿Sería todavía único como esto?

Sería sí y sería no. depende

¿Por qué o por qué no?

Entonces veamos en la documentación

Los módulos de parámetros de consulta habilitan la especificación de módulos CSS. Esto habilita CSS de ámbito local por defecto. (Puede desactivarlo con: global (...) o: global para selectores y / o reglas).

Por defecto, CSS exporta todos los nombres de clase a un alcance de selector global. Los estilos pueden tener un alcance local para evitar estilos de alcance global.

El propósito principal está aquí:

Los estilos pueden tener un alcance local para evitar estilos de alcance global.

Puede hacer con este patrón ''[path][name]__[local]'' , pero rompe el propósito principal para el alcance .

Si tiene proyecto de frontend framework como angular o reactjs . por ejemplo, angular con directive / component o reactjs con component , este es el objetivo principal del uso css. Con los módulos CSS, puede escribir código CSS normal y asegurarse de que solo se aplique a un componente determinado. Y no necesitamos un nombre exagerado o un nombre largo para un nombre de clase específico para evitar sobrescribir css