fbem-css-loader

fbem-css-loader

Getting started

Warning

• To use fbem-css-loader, webpack@5 is required
• mini-css-extract-plugin is required

This package is a fork of css-loader. However, CSS modules are enabled by default and all CSS is parsed according to BEM naming convention. So, you can export special functions from CSS files. Take a look below.

npm i -D fbem-css-loader

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "fbem-css-loader"],
      },
    ],
  },
};

Example

/* style.css */

.block {
  position: relative;
}

.block__elem {
  color: purple;
}

.block__elem_mod_val-a {
  backgound: white;
}

.block__elem_mod_val-b {
  backgound: black;
}

.block__name-with-dashes {
  display: none;
}

.block__name-with-dashes_visible {
  display: block;
}

/* index.js */

import { cnBlock, cnBlockElem, cnBlockNameWithDashes } from './style.css';

cnBlock(); // 'block'
cnBlockElem({ mod: 'val-a' }); // 'block__elem block__elem_mod_val-a'
cnBlock(['mix']); // 'block mix'
cnBlockElem({ mod: 'val-b' }, ['mix1', 'mix2']); // 'block__elem block__elem_mod_val-b mix1 mix2'
cnBlockNameWithDashes({ visible: true }); // 'block__name-with-dashes block__name-with-dashes_visible'