Webpack CSS Module loader to namespace all rules with a single hash
Webpack's css-loader implements CSS Modules by giving every .class
a unique hash which you then have to bind to your element/complement.
.a { ... }
.b { ... }
output with regular CSS Modules (webpack css-loader):
.dz1R8A { /* a different hash */ }
.JkxzOD { /* for each rule */ }
namespace-css-module-loader, as the name suggests, only gives one unique hash (a namespace) to all rules:
.2Jlr3B .a { /* both “wrapped” in the same hash */ }
.2Jlr3B .b { /* giving your rules a single namespace */ }
This hash is available as a single named export: {style}
which you only need to include in the parent div
:
import {style} from './style.scss';
export default <div className={style}>
<div class='a'></div>
<div class='b'></div>
</div>
npm i namespace-css-module-loader
In your webpack config:
loader: 'css-loader!namespace-css-module-loader'
Use it after pre-processors, it only works on pure CSS
loader: 'css-loader?importLoaders=3!postcss-loader!namespace-css-module-loader!sass-loader'
... <- ^ <- pre
Provide options to the module as a query string or query object
loader: 'css-loader!namespace-css-module-loader?id=root'
loader: ['css-loader', {
loader: 'namespace-css-module-loader',
query: {
id: 'root'
}
}]
id
(string) (default: 'style')Change the default named export {style}
:
import {root} from './app.scss';
export default <div className={root}></div>
descendant
(boolean) (default: true)Make the rule descendant of the namespace (default)
.a .b {...}
/* => */
.2Jlr3B .a .b {...}
combine
(boolean)Combine the rule with the namespace instead of making it a descendant
.a .b {...}
/* => */
.a.2Jlr3B .b {...}
combine
& descendant
Both options can be used together to group the rules:
.a .b {...}
/* => */
.a.2Jlr3B .b, .2Jlr3B .a .b {...}
It probably has nothing to do with this module but if HMR isn't working correctly try adding webpack-module-hot-accept to all your JS files.
it hot-reloads only if [you] have a module.hot.accept() call in the JS that require-s the CSS Module. (react-css-modules#51)
related: css-loader#186