css-loader localIdentName：唯一性需要哈希吗？答案

【问题标题】：css-loader localIdentName: is a hash necessary for uniqueness?css-loader localIdentName：唯一性需要哈希吗？
【发布时间】：2018-07-31 01:54:21
【问题描述】：

css-loader README 建议将localIdentName 设置为

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

是否需要散列后缀？它还会像这样独一无二吗？

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

为什么或为什么不？

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

【问题讨论】：

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

标签： css reactjs webpack css-modules css-loader

【解决方案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，就不需要哈希。不太可能需要哈希。

【讨论】：

【解决方案2】：

哈希后缀是否必要？

是的

它还会像这样独一无二吗？

会是，也不会。取决于

为什么或为什么不？

那就去documentation看看吧

查询参数模块启用 CSS 模块规范。默认情况下，这会启用本地范围的 CSS。（你可以用 :global(...) 或 :global 用于选择器和/或规则。）。

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

主要目的在这里：

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

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

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

【讨论】：

【解决方案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]',
          },
        },
      },
    ],
  },
};

【讨论】：