为什么 "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.
在使用 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.