Preserving Nested Class Names in CSS Modules

If you’re using CSS Modules to locally scope your classes, but you need to preserve specific nested class names, you need to enclose them in a :global block:

The default behavior of css-loader is to take any class name found in a file and scope it locally with the addition of a partial hash. You can nest selectors to tags without them being modified, but if you nest selectors to other class names, they will be changed during compilation. To prevent this behavior, simply wrap the class names that you don’t want to be modified in the :global block, as seen above. This approach is particularly useful when you can’t control the class names that are being applied to elements, such as when using a separate module that applies its own class names to your markup.

Leave a comment

Your email address will not be published. Required fields are marked *