为什么在 webpack 导入的 CSS 中的 class 和 id 选择器中添加“index_”前缀答案

【问题标题】：Why is "index_" prefix added to class and id selectors in webpack imported CSS为什么在 webpack 导入的 CSS 中的 class 和 id 选择器中添加“index_”前缀
【发布时间】：2018-11-07 15:35:35
【问题描述】：

使用 webpack 导入常规 CSS 文件时，它会成功导入并应用 CSS，但它只对元素选择器这样做。我发现问题是由从样式加载器导入的 CSS blob 中添加到类和 id 选择器的 index_ 前缀引起的。

在source map中可以看到原文件没有这些前缀。

所以问题仍然存在。为什么要添加这些前缀？

【问题讨论】：

你的配置是什么样的？还有this may be relevant
请显示 webpack 配置 - 它可能已配置为添加前缀
@rlemon ，感谢您的指出。我有 modules: true 在 webpack 配置中配置。我已将答案包含在问题中。
@DonnyVerduijn，而不是编辑您的原始问题，而是将您找到的答案作为答案。回答你自己的问题似乎很奇怪，但它对未来的读者非常有帮助，并向人们表明这个问题已经得到回答并且尚未开放。
@Ian 仔细想想，这很有意义。我将创建一个单独的答案。

标签： css webpack css-loader

【解决方案1】：

阅读 css-loader 的文档后，很明显这种行为是通过在 webpack 配置中将 modules: true 作为选项传递给 css-loader 来创建的。可以通过对所有类和 id 选择器使用:global(selector) 表示法来覆盖此行为。

来自文档：

使用 :local（不带括号）可以为此开启本地模式选择器。 :global(.className) 可用于显式声明全局选择器。 带 :global（不带括号）全局模式可以已为此选择器打开。

【讨论】：