模块 \'\"*.module.scss\"\' 在 Gatsby + Typescript 中没有导出成员

Question

首先，不要因为我不做研究而对此投反对票。作为一个尝试学习 React 和 Gatsby 的人，我做了很多研究。我花了 2 天时间搜索 Gatsby 文档、博客和 stackoverflow。

• 我已经在他们的文档中关注了 Gatsby 的演示项目（该文档早就该更新了）。
• 我已按照此处的说明进行操作：https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules
• 我已将 index.d.ts 添加到我的项目的 /src 中，内容如下：

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

该网站编译正常，但是，Visual Studio 代码随处显示红色文件，并存在以下问题：

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

这是该类的一些示例代码。

样式.module.scss

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

索引.tsx

import * as React from "react"
import { HeadFC, PageProps, graphql } from "gatsby"
import DefaultTemplate from "../templates/default"
import HeroBannerComponent from "../components/HeroBanner"
import {
  container  // <-- error is here
} 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 中没有错误？

Answer 1

您不能任意命名导出声明，但您也不应该尝试，因为您只是选择退出类型安全。最好自动生成类型：

https://www.gatsbyjs.com/plugins/gatsby-plugin-scss-typescript/

你也可以这样做，但你会得到any而不是string（不推荐）：

declare module '*.module.scss'