Gatsby+TypeScript中*.module.scss模块无导出成员的VSCode报错解决

已完成以下操作：

• 遵循Gatsby文档示例项目开发（文档亟需更新）
• 按照Gatsby v2转v3的CSS Modules迁移指南操作
• 在项目src目录添加index.d.ts文件，内容如下：

declare module '*.module.scss' {
  const content: {[className: string]: string};
  export = content;
}  

网站编译正常，但Visual Studio Code中大量文件显示红色错误提示：

Module "*.module.scss" has no exported member 'container'.

相关代码示例：

styles.module.scss #

.container {
    max-width: 1000px;
    width:1000px;
    padding: 0 1.4rem;
    margin: 0 auto;
}

index.tsx #

import * as React from "react"
import { HeadFC, PageProps, graphql } from "gatsby"
import DefaultTemplate from "../templates/default"
import HeroBannerComponent from "../components/HeroBanner"
import {
  container  // <-- 错误位置
} from "../styles/styles.module.scss"

const IndexPage = () => {
  return (
    <DefaultTemplate pageTitle="Home">
      <HeroBannerComponent></HeroBannerComponent>
      <main>
        <div>
          <div className={container}>

          </div>
          <hr />
          <div className={container}>

          </div>
        </div>
      </main>
    </DefaultTemplate>

  )
}

export default IndexPage

export const Head: HeadFC = () => <title>Home Page</title>

请问如何消除该错误（或忽略它），避免UI中到处显示错误提示？

错误原因是当前的TypeScript类型定义使用了CommonJS风格的export = content导出，但TSX代码中用的是ES模块的解构导入语法，两者不匹配导致TypeScript服务无法识别命名成员。以下是两种可行的解决方法：

方法一：改用ES模块默认导出（推荐） #

1. 更新src/index.d.ts的类型定义：

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

2. 修改TSX文件中的导入逻辑，使用默认导入：

// 替换原来的解构导入
import styles from "../styles/styles.module.scss"

// 使用样式类时通过对象属性访问
<div className={styles.container}>

方法二：调整类型定义适配解构导入 #

如果想保留解构导入的写法，可以更新src/index.d.ts为：

declare module '*.module.scss' {
  const content: {[className: string]: string};
  export = content;
}

然后在TSX中改用CommonJS风格的导入并解构：

import styles = require("../styles/styles.module.scss")
const { container } = styles

额外检查项 #

1. 确认tsconfig.json中的include数组包含src/**/*，确保TypeScript能识别你的类型定义文件：

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

2. 若修改后仍有错误，重启VS Code的TypeScript服务：按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server执行。

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