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

问题描述

我正在将 Gatsby 从 v2 升级到 v3，在此更新中 CSS Modules are imported as ES Modules。

网络向前发展，我们也是如此。 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
}

解决方法

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

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 包名称）。

,

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

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

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