Webpack BEM loader

Webpack loader for bem-react-core

BEM entities auto resolver for custom import strings:

import Block from 'b:block';
import Block from 'b:block m:modName';
import Block from 'b:block m:modName=modVal1|modVal2';
import BlockElem from 'b:block e:elem';
import BlockElem from 'b:block e:elem m:modName';
import BlockElem from 'b:block e:elem m:modName=modVal1|modVal2';

Install

npm i -D webpack-bem-loader

Usage

In your webpack.config.js.

Webpack 1

  // setting for bem-loader
  bemLoader: {
    naming: 'react',
    levels: ['./pathToBlocks'],
    // OR:
    // levels: {
    //     './pathToBlocks': {
    //         default: true,
    //         scheme: 'nested',
    //         naming: 'origin'
    //     }
    // },
    techs: ['js', 'css'],
    techMap: {
        js : ['react.js']
    },
    langs: ['ru', 'en']
  },

Webpack 2

// setting for bem-loader
module: {
    rules: [
        {
            test : /\.react\.js$/,
            loader: 'webpack-bem-loader',
            options: {
                naming: 'react',
                levels: ['./pathToBlocks'],
                // OR:
                // levels: {
                //     './pathToBlocks': {
                //         default: true,
                //         scheme: 'nested',
                //         naming: 'origin'
                //     }
                // },
                techs: ['js', 'css'],
                techMap: {
                    js : ['react.js']
                },
                langs: ['ru', 'en']
            }
        }
    ]
}

Options

• levels : Required option — paths to components declarations
• naming: bem-naming overrides naming
• techs : list of techs extensions for require in runtime, ['js'] by default. First tech will be default export
• techMap