如何让CSS Modules与TypeScript和Rollup协同工作？

错误原因 #

TypeScript默认无法识别.module.css模块的导入类型，而rollup-plugin-dts在生成类型声明文件时会严格检查所有导入语句，因此抛出“找不到模块或对应类型声明”的错误。

具体修复步骤 #

1. 添加CSS Modules类型声明文件 #

在项目src目录下创建css-modules.d.ts文件，写入以下类型声明：

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

该声明告诉TypeScript：所有.module.css后缀的文件，导出的是一个键值对对象，键为CSS原类名，值为编译后的最终类名字符串。

2. 确保TypeScript识别类型文件 #

修改tsconfig.json的include数组，将类型声明文件纳入编译范围：

"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]

或者简化为"src/**/*"，自动包含src目录下所有文件（包括类型声明）。

3. 优化Rollup的dts插件配置（可选） #

由于rollup-plugin-dts仅需处理TypeScript文件，可配置排除CSS文件，避免不必要的解析检查：
修改rollup.config.js中的第二个打包配置项：

{
  input: 'src/index.ts',
  plugins: [dts({
    exclude: ['**/*.css'] // 排除所有CSS文件
  })],
  output: {
    file: `${name}.d.ts`,
    format: 'es',
  },
}

验证修复 #

重新执行yarn build，此时TypeScript能正确识别CSS Modules的类型，rollup-plugin-dts不会再抛出错误，编译流程可正常完成。

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