模块“*.module.scss”在 Gatsby + Typescript 中没有导出成员 [重复]

Question

• 我已经在他们的文档中关注了 Gatsby 的演示项目（更新已经很晚了）。
• 我已按照此处的说明进行操作：https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es -模块
• 我在项目的

  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'.

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

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  // <-- 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'