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

Question

我正在将盖茨比从v2升级到v3，在这个更新中是模块作为ES模块导入。。

网络在前进，我们也是如此。ES模块允许我们更好地进行树抖动并生成更小的文件。从现在开始，您需要将CSS模块导入为：import { box } from './mystyles.module.css'

旧的方法将不再编译。

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

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

我也尝试过import * as styles，它首先是不鼓励的(因为它可以防止树抖动)，但也会导致类型错误。

Foo.module.css:

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

Foo.tsx:

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

css.d.ts:

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

Answer 1

我也遇到了同样的问题，以下几点似乎对我有用：

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

然而，这可能是对TypeScript的滥用，因为根据TypeScript文档，export =语法应该是针对CommonJS和CommonJS模块的，在这些模块系统中它代表了exports。

Answer 2

我认为唯一的方法是：

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，那么它需要一个字符串(path或npm包名)。