React CSS模块类名未渲染：类名已存在但元素无样式类

问题核心 #

使用ParcelJS打包React项目时，Button组件的CSS Modules类名未渲染到DOM元素上（浏览器显示button标签class为空），但Parcel已生成对应的哈希类名，且其他组件用相同方式正常工作。

排查与解决步骤 #

1. 验证styles对象是否正确加载 #

在Button组件中添加日志，确认导入的styles对象是否包含预期的类名：

export const Button: React.FC<ButtonProps> = (props) => {
  const { color = 'default' } = props;
  console.log('styles:', styles); // 新增日志
  console.log('color对应类名:', styles[color]);
  // ... 原有代码
}

如果控制台输出的styles是空对象或缺少对应属性，说明CSS模块未正确导入：

• 检查Button.module.css与Button.tsx是否在同一目录，导入路径./Button.module.css是否正确
• 确认文件名大小写一致（Linux/macOS系统对文件名大小写敏感）

2. 清理Parcel缓存 #

Parcel的缓存可能导致单个组件的CSS模块未更新，执行以下操作：

• 删除项目根目录下的.parcel-cache文件夹
• 停止当前开发服务器，重新启动（npm run dev或对应的启动命令）

3. 简化className写法排查classnames问题 #

暂时移除classnames，直接使用单个类名测试：

<button className={styles.primary} onClick={props.onClick}>
  <div className={styles.value}>{props.value}</div>
</button>

如果类名正常渲染，说明classnames的使用可能存在问题：

• 确认已正确安装classnames（npm list classnames检查版本）
• 检查styles[color]是否存在：比如color值是否超出定义的枚举范围（虽然你设置了默认值，但可额外确认）

4. 检查组件导出/导入路径 #

确认index.ts中的导出路径正确：

// 确保路径指向Button组件所在目录
export { Button } from './Button/Button'

同时检查页面中导入Button的路径../Components是否正确，避免因路径错误导致加载了旧版本或空组件。

5. 检查是否存在循环依赖 #

如果Button组件与其他组件存在相互导入的情况，可能导致CSS模块加载异常。排查组件间的导入关系，移除不必要的循环依赖。

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