Vite4+React项目中CSS Modules无法正常使用的问题求助

问题根源 #

你遇到的问题有两个核心原因：

1. CSS文件名拼写错误：你使用了Navigation.moduel.css，但Vite识别CSS Modules的规则是文件名必须以.module.css结尾（你把module拼成了moduel）
2. 错误使用?inline导入后缀：这个后缀会让Vite把CSS文件当作纯字符串导入，而不是解析为CSS Modules的映射对象，导致无法通过styles.navbar获取类名。

修正步骤 #

1. 修正CSS文件名 #

将Navigation.moduel.css重命名为Navigation.module.css

2. 修改组件中的导入语句 #

去掉?inline后缀，正确导入CSS Modules：

import { NavLink } from "react-router-dom";
// 修正文件名和去掉?inline后缀
import styles from "./Navigation.module.css";

function Navigation() {
  console.log(styles);
  console.log(styles.navbar);
  return (
    <header className={styles.navbar}>
      <nav>
        <ul>
          <li>
            <NavLink to="/">Home</NavLink>
          </li>
          <li>
            <NavLink to="/product">Product</NavLink>
          </li>
          <li>
            <NavLink to="/pricing">Pricing</NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default Navigation;

3. 保持CSS文件内容不变 #

.navbar {
  background-color: orange;
}
.navbar ul {
  display: flex;
}

验证效果 #

修改后重新启动项目，控制台会输出包含navbar属性的映射对象，样式也会正常应用到<header>元素上。

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