css - 为什么“index_”前缀添加到 webpack 导入的 CSS 中的类和 id 选择器

Question

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

在源映射中，您可以看到原始文件没有这些前缀。

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

标签： csswebpackcss-loader

Answer 1

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

从文档：

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