@acolorbright/css-module-bem-loader 中文文档教程

Question

css-module-bem-loader

一个 webpack 加载器，用于转换具有额外 BEM 功能的 CSS 模块对象

Install

这个 CSS 加载器依赖于 webpack 和 css-loader 来工作。

npx install-peerdeps -D @acolorbright/css-module-bem-loader && npm install -DE @acolorbright/css-module-bem-loader

Configure

css 模块 BEM 加载器只能与 css-loader 结合使用，并且必须在 css-loader 之后和 style-loader 之前应用在 webpack 配置中。 加载器仅适用于 .module.css 和 .modules.scss 文件。

{
  test: /\.module\.css/,
  use: [
    'style-loader',
    '@acolorbright/css-module-bem-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          namedExport: false,
          mode: 'pure'
        }
      }
    }
  ]
}

请注意，加载器无法在启用 modules.namedExport css-loader 选项的情况下工作。 该模块可以使用或不使用 css-loader 选项 esModule

Usage

正确使用加载器，您需要确保模块的块类名等于模块的文件名：

/* navigation.module.css */
.navigation {
  /* styles */
}

.navigation__links {
  /* styles */
}

.navigation--expanded {
  /* styles */
}

为了 BEM 类名的作用域，这样可以更轻松地选择类名，而不必查找包含破折号和下划线的复杂键：

import styles from './navigation.module.css'

/* get the block className */
styles.block

/* get an element className */
styles.element.links

/* get a modifier className */
styles.modifier.expanded

因为只有一个块选择器，block 键返回一个字符串。 对于元素和修饰符，该对象提供了两个嵌套对象 element 和 modifier，它们包含没有 block__ 和 block-- 的相关类名—— 前缀。

如果块类名不包含任何 CSS 规则，块类名将返回一个空字符串 BEM 密钥被添加到原始对象密钥之上，因此仍然可以在没有添加密钥的情况下使用该模块