React TypeScript项目引入Sass文件提示找不到模块或类型声明求助

开发者阿泽

2026-8-25

解决React TypeScript中引入Sass文件的类型声明错误

这个问题是因为TypeScript无法识别Sass模块的类型，以下是具体解决步骤：

添加Sass类型声明文件
在项目的src目录下创建一个types文件夹（如果不存在），然后在其中新建scss.d.ts文件，写入以下内容：
```
declare module '*.scss' {
  const styles: Record<string, string>;
  export default styles;
}
```
这段代码告诉TypeScript：所有.scss后缀的文件都是一个导出键值对对象的模块，键是你定义的Sass类名，值是编译后的CSS类名。
确保TypeScript扫描到声明文件
打开tsconfig.json，检查include数组是否包含src/**/*，确保TypeScript能自动识别src目录下的所有类型声明文件：
```
"include": [
  "src/**/*"
]
```
可选：使用CSS Modules规范命名
如果你的项目使用CSS Modules（即通过import styles from 'xxx.scss'获取类名映射），更规范的做法是将Sass文件命名为Navbar.module.scss，create-react-app会自动为这类文件启用CSS Modules支持，同时TypeScript也能更好地处理类型推导，无需额外配置也能避免报错。