如何在JSX中应用.less样式？项目实践遇阻求助

你的项目采用了CSS Modules + BEM命名规范的封装模式，b函数是用来生成BEM格式类名的工具（styles.d.ts仅为TypeScript提供类型提示，实际逻辑由webpack/loader实现）。下面是具体的修复步骤：

1. 核心逻辑梳理 #

• b()无参数调用：返回当前LESS文件的根类名（比如.ComponentProvidersInformation）
• b('xxx')传参调用：返回根类名拼接子元素的BEM类名（比如.ComponentProvidersInformation__name）

2. 修复样式不生效问题 #

正确的LESS文件写法 #

LESS的&父选择器必须嵌套在根选择器内部才能正确指代父类名，修改你的LESS代码：

.ComponentProvidersInformation {
  font-size: 12px;
  font-weight: bold;

  // 嵌套在根选择器内，&代表.ComponentProvidersInformation
  &__name {
    font-weight: bold;
  }

  &__specialties {
    font-weight: bold;
  }
}

TSX文件的正确调用方式 #

确保正确导入b，并按BEM规则调用：

import { b } from './ComponentProvidersInformation.less';

// ...

<div className={b()}>
   <Text className={b('name')}>{items.name}, </Text>
   <Text className={b('specialties')}>{items.specialties}</Text>
</div>

3. 排查配置（可选） #

如果样式仍不生效，检查webpack的less-loader配置是否开启了CSS Modules，示例配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 类名生成规则需匹配BEM格式
                localIdentName: '[local]--[hash:base64:5]',
              },
            },
          },
          'less-loader',
        ],
      },
    ],
  },
};

为什么之前的写法失效？ #

• 初始LESS的.items等独立类名，和b('items')期望的BEM格式类名不匹配，导致样式无法关联
• 后来的LESS写法把&__name放在根选择器外部，LESS编译后会生成.ComponentProvidersInformation {}和.__name {}（&无父选择器），类名完全错误

内容的提问来源于stack exchange，提问作者Daniel