Css-loader: [css-modules] Is it possible to preserve the local class name?

[kcjonson]

This is best demonstrated with an example.

1) Generated CSS files are only the hash or unique identifier (prevent style bleed)
2) Class name is preserved in the html structure to inherit from global styles

component.css (source)

.element {
  background-color: blue;
}

component.jsx (source)

import styles from './component.css';
...
return (<div className={styles.element}>

component.css (output)

.1vZzB {
  background-color: blue;
}

component.jsx (output)

<div class="node 1vZzB">  

Note the space. This allows global styles to target .node but the components styles to never bleed outside their intended scope.

[longlho]

u can use :global .node { color: black; } or concat things in className manually

[michael-ciniawsky]

see @longlho comment

[fzembow]

One neat thing is you can use local scope inside of global scope.

For example:

.node {
  // some styles
}

:global .mobile {
  :local .node {
    // some other styles
  }
}

in which case you can affect the .node compiled className with the non-compiled .mobile classname