CSS Modules未返回类名：Create React App集成问题求助

我之前用custom-react-scripts配置CSS Modules时也碰到过一模一样的问题，咱们一步步拆解排查：

1. 先确认核心配置是否生效 #

首先检查你的package.json配置是否正确：

• 确保已经替换了默认的react-scripts：package.json里的scripts部分要换成custom-react-scripts，比如：

  "scripts": {
    "start": "custom-react-scripts start",
    "build": "custom-react-scripts build",
    "test": "custom-react-scripts test"
  }
  

• 在package.json根节点添加启用CSS Modules的配置：

  "custom-react-scripts": {
    "cssModules": true
  }
  

• 配置完成后必须重启开发服务器，缓存会导致新配置无法生效。

2. 检查文件名与引入路径的匹配 #

你提到创建了test style.module.css，但引入时写的是import styles from './style.module.css';——这里路径和文件名明显不匹配！

• 要么把文件名改成style.module.css，要么把引入路径调整为./test style.module.css（不过非常不建议文件名带空格，容易引发解析异常，最好改成test-style.module.css或testStyle.module.css这类无空格的命名）。

3. 验证CSS文件内容是否正确 #

确保你的.module.css文件里确实存在red类，比如：

/* style.module.css */
.red {
  color: red;
  font-weight: bold;
}

仔细检查有没有拼写错误、大小写问题（CSS Modules对类名大小写是敏感的）。

4. 清除缓存试试 #

如果以上步骤都没问题，试试清除webpack的缓存：

• 关闭开发服务器
• 删除项目根目录下的node_modules/.cache文件夹
• 重新运行npm start

按这些步骤排查后，应该就能正常获取styles.red对应的类名了。

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