React JS项目中Babel无法编译CSS文件 访问.className时报错

按出现概率从高到低排查以下问题即可解决：

• 首先确认是否误用了CSS Modules规则
  如果你项目里的CSS文件命名带.module.css后缀（比如Home.module.css），CRA、Vite等脚手架会默认开启CSS Modules的样式隔离，类名不会直接暴露到全局，直接写字符串类名会失效甚至触发构建报错。
  错误写法示例：

  import './Home.module.css';
  // 直接写字符串类名无法匹配到隔离后的类名
  export default function Home() {
    return <div className="container">首页内容</div>
  }
  

  正确写法示例：

  // 把样式文件作为对象导入
  import styles from './Home.module.css';
  export default function Home() {
    // 短横线命名的类名会自动转小驼峰，比如.container-box对应styles.containerBox
    return <div className={styles.container}>首页内容</div>
  }
  

  如果你不需要CSS Modules的隔离能力，直接把文件后缀的.module去掉，改成普通的xxx.css，就可以正常用全局字符串类名了。

• 检查CSS文件导入逻辑

  • 核对CSS导入的相对路径是否正确，注意文件名大小写敏感（本地Windows环境不区分大小写不报错，部署到Linux服务器会直接找不到文件），路径层级数错会导致样式文件根本没被加载，类名自然无法识别。
  • 全局通用CSS建议统一在项目入口文件（src/main.jsx或src/index.jsx）引入，不要在各个组件里重复导入同一个全局CSS文件，容易引发构建时的样式冲突。

• 检查JSX类名写法语法错误

  • JSX里的类名属性必须写成驼峰形式的className，不要写原生HTML的class属性，写法错误会直接触发React的语法报错，类名也不会生效。
  • 多类名拼接不要直接硬写空格，推荐用clsx库处理条件类名，避免拼接时出现undefined、多余空格的问题：

    import clsx from 'clsx';
    // 示例：基础类+激活状态类+全局公共类
    <div className={clsx('card', isActive && 'card-active', 'global-rounded')} />
    

• 检查构建工具的CSS解析配置
  如果你是手动搭建的React构建环境，没有配置对应CSS解析规则会直接抛解析错误：

  • Webpack环境需要安装并配置style-loader+css-loader才能正常识别CSS文件
  • Vite原生支持普通CSS，如果使用Less/Sass等预处理器，需要手动安装对应依赖（比如用Less就执行npm i less -D），否则导入预处理器文件会直接报错。

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