web-dev-qa-db-ja.com

css-loader localIdentName：一意性のためにハッシュは必要ですか？

css-loader README は、localIdentNameが

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

ハッシュサフィックスは必要ですか？これはまだユニークなのでしょうか？

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

なぜですか？

＃3がこのオプションであるという事実から、 GitHub Issueの議論 は必要ないかもしれないと信じさせられます。

cssreactjswebpackcss-modulescss-loader
18
Scott H

localIdentNameは、modulesオプションとともに使用されます。

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

次のような長いクラス名を生成します。

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

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

そのため、パス、名前、クラス名が一意のIDを生成する限り、ハッシュは必要ありません。ハッシュが必要になることはほとんどありません。

4
jordiburgos

ハッシュサフィックスは必要ですか？

はい

これはまだ一意ですか？

はい、いいえになります。依存する

なぜ、またはなぜそうではないのですか？

次に documentation を見てみましょう

クエリパラメータモジュールは、CSSモジュール仕様を有効にします。これにより、デフォルトでローカルスコープのCSSが有効になります。 （セレクターやルールの場合は、：global（...）または：globalでオフにできます。）.

デフォルトでは、CSSはすべてのクラス名をグローバルセレクタースコープにエクスポートします。スタイルをローカルにスコープして、グローバルなスコープスタイルを回避できます。

主な目的は次のとおりです。

スタイルをローカルにスコープして、グローバルなスコープスタイルを回避できます。

このパターンでできます'[path][name]__[local]'、ただしscopeの主な目的を破ります。

angularやreactjsなどのプロジェクトフロントエンドフレームワークがある場合。たとえば、angular with directive/componentまたはreactjs with componentの場合、これは主な用途のスコープcssです。 CSSモジュールを使用すると、通常のCSSコードを記述し、特定のコンポーネントにのみ適用されることを確認できます。 CSSの上書きを避けるために、特定のクラス名に名前や長い名前を考え直す必要はありません。

0
hendrathings

webpack 4.35.3のlocalidentname

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