@fbem/css-loader

Getting started

@fbem/css-loader is a loader for webpack, which allows you to load CSS and compile it to BEM functions. @fbem/css-loader is a fork of css-loader.

Warning

1. webpack@5 is required
2. mini-css-extract-plugin@2.7.0+ is required

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"],
      },
    ],
  },
};

Options

url

Type

type UrlOption = boolean | { filter: (url: string, resourcePath: string) => boolean; }

Description

Default: true

Allow to enable/disable handling the CSS functions url and image-set. A function can also be passed to control this behavior dynamically based on the path to the asset.

import

Type

type ImportOption = boolean | { filter: (url: string, media: string, resourcePath: string) => boolean }

Description

Default: true

Allows to enable/disable @import at-rules handling. A function can also be passed to control this behavior dynamically based on the path to the asset.

naming

Type

type NamingOption = { 
  elem?: string,
  modName?: string,
  modVal?: string,
  prefix?: string
}

Description

Default:

{ 
  elem: '__', 
  modName: '_', 
  modVal: '_', 
  prefix: 'cn' 
}

Allows to specify separators for parsing classnames according to the rules of the BEM methodology, also allows to specify a prefix for exported BEM functions.

exportGlobals

Type

type ExportGlobalsOption = boolean

Description

Default: false

Allow @fbem/css-loader to export names from global class or id, so you can use that as local name.

exportOnlyLocals

Type

type ExportOnlyLocalsOption = boolean

Description

Default: false

Useful when you use for pre-rendering (for example SSR). @fbem/css-loader doesn't embed CSS but only exports the identifier mappings.

sourceMap

Type

type SourceMapOption = boolean

Description

Default: depends on the compiler.devtool value

By default generation of source maps depends on the devtool option. All values enable source map generation except eval and false value.

importLoaders

Type

type ImportLoadersOption = number

Description

Default: 0

Allows to enable/disable or specify number of loaders applied before CSS loader for @import at-rules, CSS modules and ICSS imports, i.e. @import/composes/@value value from './values.css'/etc.

auto

Type

type AutoOption = boolean | RegExp | ((path: string) => boolean);

Description

Default: undefined

Allows auto enable CSS modules/ICSS (imports & exports from CSS) based on filename.

localIdent

Type

type LocalIdentOption = {
  name?: string,
  context?: string,
  hashSalt?: string,
  hashDigest?: string,
  hashDigestLength?: number,
  hashFunction?: any;
  hashStrategy?: 'resource-path-and-local-name' | 'minimal-subset';
  regExp?: string | RegExp;
  get?: (context: LoaderContext<Options>, localIdentName: string, localName: string) => string;
}

Description

Default:

const localIdent = {
  name: '[hash:base64]',
  context: loaderContext.rootContext,
  hashSalt: loaderContext._compilation.hashSalt,
  hashFunction: loaderContext._compilation.hashFunction,
  hashDigest: loaderContext._compilation.hashDigest,
  hashDigestLength: loaderContext._compilation.hashDigestLength
}

Allows to configure the generated local ident name.