web-dev-qa-db-fra.com

css-loader localIdentName: un hachage est-il nécessaire pour l'unicité?

Css-loader README suggère que localIdentName soit défini sur

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

Le suffixe de hachage est-il nécessaire? Serait-ce toujours unique comme ça?

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

Pourquoi ou pourquoi pas?

Le fait que le numéro 3 soit une option dans cette discussion sur le problème GitHub me porte à croire que cela n’est peut-être pas nécessaire.

cssreactjswebpackcss-modulescss-loader
17
Scott H

La localIdentName est utilisée avec les options modules:

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

Il génère des noms de classe plus longs comme:

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

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

Ainsi, le hachage ne serait pas nécessaire tant que le chemin, le nom et le nom de la classe génèrent des identifiants uniques. Il est très peu probable que le hash soit nécessaire.

3
jordiburgos

Le suffixe de hachage est-il nécessaire?

Oui

Serait-ce toujours unique comme ça?

Serait oui et serait non. dépend

Pourquoi ou pourquoi pas?

Alors voyons sur documentation

Le paramètre de requête modules active la spécification CSS Modules . Cela active par défaut les CSS localisées. (Vous pouvez le désactiver avec : Global (...) ou: global pour les sélecteurs et/ou les règles.).

Par défaut, CSS exporte tous les noms de classe dans une étendue de sélecteur global . Les styles peuvent être localisés localement pour éviter les styles globaux.

Le but principal est ici:

Les styles peuvent être localisés localement pour éviter les styles globaux.

Vous pouvez le faire avec ce modèle '[path][name]__[local]', mais vous interrompez l’objet principal de scope.

Si vous avez un cadre frontal de projet comme angular ou reactjs. Par exemple, angular avec directive/component ou reactjs avec component, il s'agit de la portée d'utilisation principale css. Avec les modules CSS, vous pouvez écrire du code CSS normal et vous assurer qu'il ne s'applique qu'à un composant donné. Et nous n'avons pas besoin d'un nom trop long ou trop long pour un nom de classe spécifique afin d'éviter d'écraser css

0
hendrathings