Codesandbox中CSS Modules无法工作：文件存在却无法找到

这是个很常见的跨环境配置问题，我帮你梳理几个关键的排查和解决步骤：

1. 补充TypeScript类型声明 #

报错里提到了「corresponding type declarations」，这说明TypeScript无法识别.module.css文件的类型。你需要在项目根目录（或src目录下）创建一个类型声明文件，比如css-modules.d.ts，内容如下：

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

之后检查tsconfig.json的include配置，确保这个声明文件被包含在内，比如：

{
  "include": ["src/**/*", "css-modules.d.ts"]
}

2. 确认Codesandbox的CSS Modules配置 #

如果你是基于Create React App的项目，本地默认支持CSS Modules，但Codesandbox有时需要明确触发配置：

• 尝试点击Codesandbox侧边栏的「Restart」按钮，重启项目环境，让配置重新加载
• 如果是自定义webpack配置，确保css-loader的配置中开启了Modules：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.module\.css$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
              },
            },
          ],
        },
      ],
    },
  };
  

3. 校验文件路径与大小写 #

虽然你提到导入语句和示例一致，但Codesandbox的运行环境是区分大小写的，而本地VSCode可能因为系统设置不区分。请确认：

• ./Example.module.css文件确实存在于对应的目录下
• 文件名的大小写和导入语句完全匹配（比如不要写成example.module.css）

4. 检查依赖完整性 #

确保项目中安装了处理CSS Modules的必要依赖，在终端执行：

npm install css-loader style-loader --save-dev

如果是使用mini-css-extract-plugin替代style-loader，也要确认该依赖已安装。

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