Question

css-loader README表示localIdentName设置为

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

是否需要散列后缀？它仍然是独一无二的吗？

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

为什么或为什么不呢？

＃3是GitHub Issue discussion中的一个选项，这让我相信它可能没有必要。

Answer 1

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，就不需要哈希。不太可能需要散列。

Answer 2

是否需要哈希后缀？

是

它仍然是唯一的吗？

是的，也不会。取决于

为什么或为什么不呢？

然后点击documentation

查询参数模块启用CSS模块规范。   这默认情况下启用本地范围的CSS。（你可以用它关掉它   ：全局（...）或：全局选择器和/或规则。）。

默认情况下，CSS将所有类名导出到全局选择器范围中。   样式可以在本地范围内，以避免全局范围样式。

主要目的在于：

样式可以在本地范围内，以避免全局范围样式。

你可以使用这种模式'[path][name]__[local]'，但是你打破了范围的主要目的。

如果您有项目前端框架，例如angular或reactjs。例如angular与directive / component或reactjs与component，这是主要目的使用范围css。使用CSS模块，您可以编写正常的CSS代码并确保它仅适用于给定的组件。并且我们不需要为特定的类名过度思考名称或长名称以避免覆盖css

Answer 3

localidentname on webpack 4.35.3

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

css-loader localIdentName：是唯一性必需的哈希吗？

3 个答案: