为什么 "index_" 前缀添加到 class 和 id 选择器在 webpack 导入 CSS

Why is "index_" prefix added to class and id selectors in webpack imported CSS

在使用 webpack 导入常规 CSS 文件时,它成功导入并应用了 CSS,但仅对元素选择器如此。我发现问题是由添加到 class 的 index_ 前缀和从样式加载器导入的 CSS blob 中的 id 选择器引起的。

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

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

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

来自文档:

With :local (without brackets) local mode can be switched on for this selector. :global(.className) can be used to declare an explicit global selector. With :global (without brackets) global mode can be switched on for this selector.