BEM loader
The module has several purposes:
- load CSS from bem-based project
- provide functions to combine bemhtml templates from bem-based project
Loading CSS
It's necessary to set up plugin:
// -----> in webpack.config.js var loader = ; var CollectBemAssetsPlugin = loaderCollectBemAssetsPlugin; moduleexports = // ... plugins: { loader; } // load data to css-loader techs: 'css' 'bemhtml' // or maybe post.css techExtensions: // it is possible to define custom extensions for technology bemhtml: 'bemhtml' 'bemhtml.js' // where to search css levels: './bem-project/common.blocks' ;
And use loader:
// -----> somewhere in code ; // this file have to exist and should be created manually, // also a name of the file is the name of BEM-block // ... Webpack should handle everything else
You can also generate stubs using StubsCreatorPlugin:
// -----> in webpack.config.js var loader = ; var CollectBemAssetsPlugin = loaderStubsCreatorPlugin; var stubsDir = './bem-stubs'; moduleexports = // ... plugins: stubsDir componentNames: 'button' 'select' // or if you want to generate stubs for all components in some library // pathsToComponents: [ 'src/components' ] ;
And somethere in your code:
;
Loading BEMHTML
// -----> in webpack.config.js var loader = ; var CollectBemAssetsPlugin = loaderCollectBemAssetsPlugin; var generateBemHtml = loadergenerateBemHtml; moduleexports = plugins: { if processenvSTANDALONE // e.g. var out = bemxjstvidom; fs; } techs: 'bemhtml' levels: './bem-project/common.blocks') ;