Gatsby项目中VSCode提示scss模块找不到对应类型声明如何解决

问题原因 #

这是TypeScript类型检查抛出的错误，运行无报错是因为Gatsby构建流程已经通过gatsby-plugin-sass处理了scss文件的导入逻辑，但TypeScript默认不识别.scss后缀的模块，所以VSCode会抛提示。

修复方案 #

根据你的使用场景二选一即可：

场景1：需要将该scss作为CSS Modules使用（要调用里面的类名变量）

• 首先重命名my_file.scss为my_file.module.scss，gatsby-plugin-sass默认仅将带.module后缀的样式文件识别为CSS Modules
• 在项目src目录下新建类型声明文件（命名可自定义，比如sass.d.ts），添加如下内容：

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

• 调整导入语句：

// 两种导入写法都可以
import styles from './my_file.module.scss'
import * as styles from './my_file.module.scss'

• 如果修改后还是提示报错，打开tsconfig.json检查include配置是否包含了声明文件所在目录，示例配置如下：

{
  "include": ["src/**/*"]
}

• 按快捷键Ctrl+Shift+P（Mac为Cmd+Shift+P），选择「TypeScript: Restart TS Server」重启VSCode的TS服务即可。

场景2：仅需要全局导入样式，不需要调用内部类名变量

直接修改导入语句即可，不需要额外配置：

import './my_file.scss'

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