如何使模块 css 在 gatsby 应用程序中与 typescript 一起使用？答案

【问题标题】：How to make module css works with typescript in a gatsby application?如何使模块 css 在 gatsby 应用程序中与 typescript 一起使用？
【发布时间】：2020-08-06 06:42:05
【问题描述】：

我有一个 GastbyJS 应用程序，我正在尝试在其上添加打字稿。我解决了大部分问题，但我无法使用 css 模块。

我的文件中有这个导入，效果很好：
import styles from "./card.module.css"

但是当我添加打字稿配置时，它说Cannot find module './card.module.css'.ts(2307)

我尝试使用一些 gatsby 插件，但它们没有按预期工作。

完整代码在这里：github

【问题讨论】：

也许你可以在 tsconfig.json 插件中添加gatsby-plugin-typescript。
你用的是什么版本的 gatsby？

标签： css typescript gatsby

【解决方案1】：

我遇到了同样的问题，在尝试了所有各种插件后，我发现了这个对我有用的解决方案。

创建一个 css.d.ts 文件：

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

将这些行添加到您的 tsconfig.json 文件中：

"esModuleInterop": true,
"files": ["./src/typings/css.d.ts"]

“文件”路径需要与您的类型定义文件所在的位置相匹配。

https://github.com/thetrevorharmon/gatsby-starter-typescript-sass/issues/1#issuecomment-436748732

【讨论】：

如果你有一个.jsconfig，那么等效的程序是什么？