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

Question

我正在将 Gatsby 从 v2 升级到 v3，并且在此更新中CSS模块将作为 ES Modules 导入。

\n

\n

网络在进步，我们也在进步。ES 模块使我们能够更好地进行 tree shake 并生成更小的文件。从现在开始，您\xe2\x80\x99将需要导入CSS模块：import { box } from \'./mystyles.module.css\'

\n

\n

旧方法将不再编译。

\n

更改导入后，它可以正确编译并且看起来符合预期。唯一的问题是，由于找不到导出，我收到类型错误。

\n

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

\n

我也尝试过import * as styles，首先不鼓励这样做（因为它可以防止树摇动），但也会导致类型错误。

\n

Foo.module.css：

\n

.foo { color: red; }\n.bar { color: blue; } \n

\n

Foo.tsx：

\n

import { foo, bar } from "./Foo.module.css"\n// Module "*.module.css" has no exported member \'foo\'\n// Module "*.module.css" has no exported member \'bar\'\n

\n

CSS.d.ts：

\n

declare module "*.module.css" {\n    const styles: { [className: string]: string }\n    export * from styles\n}\n

\n

Answer 1

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

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

除非您能够从 css 文件中导出单独的样式d.ts：

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

顺便说一句，类型声明中的语法不正确，如果您from在导出语句中使用，那么它需要一个字符串（路径或 npm 包名称）。