css-loader localIdentName：哈希值是否必要确保唯一性？

Question

css-loader README建议将localIdentName设置为

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

哈希后缀是否必要？不加后缀是否依然唯一？

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

为什么？或者为什么不呢？

在这个GitHub问题讨论中，选项＃3的存在使我相信可能并不必要。

- Scotty H

---

根据这个css-loader的github评论，默认情况下哈希将是“相对路径和本地类名的摘要”，这使得它在你的第一个示例中看起来完全多余！ - jackocnr

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，就不需要使用哈希了。这种情况下使用哈希的可能性非常小。

- jordiburgos

Answer 2

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]',
          },
        },
      },
    ],
  },
};

- Song

Answer 3

哈希后缀是否必要？

是的。

即使这样，它仍然会是唯一的吗？

可能是，也可能不是。这取决于情况。

为什么或者为什么不？

那就看看文档吧。

查询参数模块启用了CSS模块规范。 这默认启用本地作用域CSS。（您可以使用 :global(...) 或 :global 选择器和/或规则来关闭它。）

CSS默认将所有类名导出到全局选择器范围内。 可以局部作用域样式以避免全局作用域样式。

主要目的在于：

可以局部作用域样式以避免全局作用域样式。

您可以使用此模式 '[path][name]__[local]'，但这会破坏作用域的主要目的。

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

- hendrathings