如何在className中引用命名样式表？CSS Modules导入报错求助

1. 解决"can't resolve"路径错误 #

• 核对路径大小写：React项目文件路径区分大小写，错误提示中是./component/layout/...，但你导入的是./Components/layout/...，需确认文件夹实际命名是component还是Components，保持两者一致。
• 修正相对路径层级：如果NavBar.js已经在Components目录下，导入layout文件夹内的CSS文件时，无需重复写Components层级。比如文件结构为：

  src/
  ├─ Components/
  │  ├─ NavBar.js
  │  └─ layout/
  │     └─ Good.module.css
  

  正确导入路径应为./layout/Good.module.css。

2. 修正代码语法错误 #

你的JSX存在多余反引号、未闭合标签、错误属性及未定义变量问题，修正后的代码如下：

import { Link } from 'react-router-dom';
// 确保路径正确
import classes from './layout/Good.module.css';

function NavBar() {
  return (
    <header className={classes.header}> {/* 引用CSS Modules中的类 */}
      <nav>
        <li>
          <Link to='/home'>Home</Link> {/* Link跳转属性为to，且闭合标签 */}
        </li> {/* 闭合li标签 */}
      </nav>
    </header>
  );
}

export default NavBar; // 导出组件

3. CSS Modules正确使用规范 #

• 定义CSS类：在Good.module.css中正常编写类选择器，例如：

.header {
  background-color: #2c3e50;
  padding: 1rem;
}

nav-link {
  color: white;
  text-decoration: none;
}

• 组件内引用：通过导入的对象（如classes）访问类名。驼峰式类名直接用classes.navLink，短横线分隔的类名需用classes['nav-link']形式调用。这种方式会自动为类名添加唯一后缀，实现作用域隔离，避免全局类名冲突。

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