如何将CSS模块的类型声明编写为ES模块

我正在将盖茨比从v2升级到v3，并且在这次更新中

网络在前进，我们也在前进。ES模块允许我们更好地摇动树并生成更小的文件。从现在起，您需要将CSS模块导入为：

import{box}From./mystyles.module.CSS'

旧方法将不再编译

更改导入后，它将正确编译，并且看起来与预期的一样。唯一的问题是，由于找不到导出，我得到了类型错误

我的假设是，类型声明是错误的，但我不确定如何在不将每个可能的CSS类命名为导出的情况下动态地键入它

我还尝试了

import*as style

，这首先是不鼓励的（因为它可以防止树摇晃），但也会导致类型错误

Foo.module.css:

.foo{color:red；}
.bar{颜色：蓝色；}

Foo.tsx:

从“/foo.module.css”导入{foo，bar}
//模块“*.Module.css”没有导出的成员“foo”
//模块“*.Module.css”没有导出的成员“bar”

css.d.ts:

声明模块“*.module.css”{
常量样式：{[className:string]：string}
从样式导出*
}

我认为唯一的方法是使用：

import styles from "./Foo.module.css";

除非您能够从

d.ts

中的css文件导出单个样式：

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

---

顺便说一句，您的类型声明中的语法不正确，如果您在导出语句中使用

from

，则它需要一个字符串（路径或npm包名）。

请尝试将

css.d.ts

重命名为

global.d.ts

或

globals.d.ts

，感谢您的来电。声明文件被很好地收集了起来。如果我手动在其中键入所有类名，它将接受它。这是非常乏味的，而且不是一个可行的解决方案…你所得到的错误是告诉你什么是错的。你需要

从“/Foo.module.css”

导入样式这篇文章可能很方便->谢谢，T先生。我已经阅读了这篇文章，这确实是它今天在盖茨比V2中的工作方式，但正如问题中的链接所解释的，盖茨比V3要求将样式作为ES模块导入。这意味着导入应该是

import{foo}from./foo.module.css'

。解决方案将不会使用旧方法编译。除了类型错误之外，新方法工作得非常好。我会修正这项质询，使问题更清楚。