default css class loader for webpack
What
This loader adds toString()
to a style object that load via css-loader.
By default it will return .root
.
style.css
Before
const style = ; console; // [object Object]console; // root___1J7bD
After
const style = ; console; // root___1J7bDconsole; // root___1J7bD
Why
BEM style like CSS naming conventions with CSS-Modules made easy.
;const Button = ; const PrimaryButton = <button className=` `>Hi</button>
;const searchForm = ; const SearchForm = <form className=``> <input className=``> <button className=` `> Search </button> </form>
Install
npm install --save-dev default-css-class-loader
You need to install css-loader too.
Setup
webpack.config.js
moduleexports = module: loaders: test: /\.css$/ loader: 'style!default-css-class!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' ;
Config
Use name
to customize the default class name.
default-css-class?name=base