wake-up-neo.com

css-loader localIdentName: Ist für die Eindeutigkeit ein Hash erforderlich?

Der css-loader README schlägt vor, dass localIdentName auf gesetzt ist

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

Ist das Hashing-Suffix notwendig? Wäre es dennoch so einzigartig?

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

Warum oder warum nicht?

Die Tatsache, dass # 3 eine Option in dieser GitHub Issue-Diskussion ist lässt mich glauben, dass es nicht notwendig ist.

cssreactjswebpackcss-modulescss-loader
17
Scott H

Die Variable localIdentName wird zusammen mit den Optionen für modules verwendet:

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

Es erzeugt längere Klassennamen wie:

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

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

Daher ist der Hash nicht erforderlich, solange Pfad, Name und Klassenname eindeutige IDs erzeugen. Es ist sehr unwahrscheinlich, dass der Hash benötigt wird.

3
jordiburgos

Ist das Hashing-Suffix notwendig?

Ja

Wäre es noch so einzigartig?

Wäre ja und wäre nein. hängt davon ab

Warum oder warum nicht?

Dann sehen Sie auf Dokumentation

Die Abfrageparametermodule aktivieren die CSS-Modulspezifikation . Dies aktiviert standardmäßig CSS mit lokalem Umfang. (Sie können ihn mit : Global (...) oder: global für Selektoren und/oder Regeln ausschalten.).

Standardmäßig exportiert CSS alle Klassennamen in einen globalen Auswahlbereich . Stile können lokal festgelegt werden, um globale Gültigkeitsstile zu vermeiden.

Der Hauptzweck ist hier:

Styles können lokal festgelegt werden, um globale Scoping-Stile zu vermeiden.

Sie können dieses Muster '[path][name]__[local]' verwenden, aber Sie unterbrechen den Hauptzweck von scope.

Wenn Sie ein Projekt-Frontend-Framework wie angular oder reactjs haben. Zum Beispiel angular mit directive/component oder reactjs mit component ist dies der Hauptzweckbereich css. Mit CSS-Modulen können Sie normalen CSS-Code schreiben und sicherstellen, dass er nur für eine bestimmte Komponente gilt. Außerdem brauchen wir keinen Namen oder einen langen Namen für einen bestimmten Klassennamen, um das Überschreiben von CSS zu vermeiden

0
hendrathings

localidentname im Webpack 4.35.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
          },
        },
      },
    ],
  },
};
0
Song