funbox / scss-vars-loader

SCSS variables for BEM-blocks

@funboxteam/scss-vars-loader

Webpack loader that injects $b variable declaration to the processed files with the name of the current BEM block as a value.

По-русски

Rationale

When we develop web apps we use BEM on filesystem. Sometimes blocks become too huge to handle them easily, and when you suddenly need to rename one, you have to rewrite the name in every file. To make it a bit easier we decided to unify block name in SCSS files by $b variable.

At the same time it allows us to generate SCSS files using templates and not to care about the proper name of the selector there.

Getting Started

Install the loader in your project:

npm install --save-dev @funboxteam/scss-vars-loader

Add it into the project's Webpack config so that it is called before sass-loader:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // ...
          'sass-loader',
          '@funboxteam/scss-vars-loader',
          // ...
        ],
      },
    ],
  },
};

Usage

Use $b to construct SCSS selectors:

.#{$b}__elem_mod_value {
  color: red;
}

Implementation details

At the build stage this line is added into the each processed file:

$b: 'blockname';

To find out the name of the current BEM block properly, the loader goes though the path of the processed file from right to left and searches the first directory name which does not start with _ and uses such directory as a value for $b.