Search code examples
csswebpackcss-loader

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

While importing a regular CSS file with webpack, it successfully imports and applies the CSS, but it only does so for element selectors. I discovered that the problem is caused by a index_ prefix that is added to class and id selectors in the imported CSS blob from the style-loader.

enter image description here

In the source map, you can see that the original file does not have these prefixes.

enter image description here

So the question remains. Why are these prefixes added?

Solution

  • After reading the docs of css-loader, it is clear this behavior is created by passing modules: true as an option to css-loader in the webpack configuration. This behavior can be overridden by using:global(selector) notation with all class and id selectors.

    From the docs:

    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.