VS Code提示‘Module Not found’却能跳转至对应CSS模块文件

1. 检查TypeScript配置（tsconfig.json） #

• 确认include数组覆盖了CSS模块所在目录，避免漏检：

  {
    "include": ["src/**/*", "src/styles/**/*.module.css"]
  }
  

• 若用了路径别名，确保paths和baseUrl配置正确映射目标目录：

  {
    "baseUrl": "./src",
    "paths": {
      "@styles/*": ["styles/*"]
    }
  }
  

• 验证moduleResolution设置为node（默认值，但可能被误改）：

  {
    "moduleResolution": "node"
  }
  

2. 调整ESLint配置（.eslintrc.js/.eslintrc.json） #

若报错来自ESLint，需配置解析器识别CSS模块：

• 先安装依赖：npm install eslint-import-resolver-typescript eslint-import-resolver-node --save-dev
• 在配置文件中添加解析规则：

  {
    "settings": {
      "import/resolver": {
        "typescript": {},
        "node": {
          "extensions": [".js", ".jsx", ".ts", ".tsx", ".css", ".module.css"]
        }
      }
    }
  }
  

3. 清除VS Code缓存 #

编辑器缓存可能导致校验与跳转逻辑不一致：

• 打开命令面板（Cmd/Ctrl + Shift + P），执行Developer: Reload Window重载窗口
• 若无效，删除项目根目录.vscode文件夹下的workspaceStorage目录（注意备份自定义配置）

4. 核对文件路径大小写 #

Linux/macOS系统对文件名大小写敏感，VS Code跳转可能忽略大小写，但TypeScript/ESLint校验会严格匹配。确认导入路径的大小写和实际文件名完全一致，比如./Button.module.css和./button.module.css会被视为不同文件。

5. 手动添加CSS模块类型定义 #

如果TypeScript无法识别CSS模块类型，在src目录下创建css-modules.d.ts文件：

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

确保tsconfig.json的include包含该文件。

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