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

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。 （您可以使用：global（...）或：global选择器和/或规则将其关闭。）。

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

主要目的是：

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

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

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