Как написать объявление типа для модуля CSS как модуля ES

Question

Я обновляю Gatsby с v2 до v3, и в этом обновлении модули CSS импортируются как модули ES . Он компилируется правильно и выглядит так, как ожидалось, за исключением того, что я получаю ошибки типа в моем редакторе, поскольку он не может найти экспорт.

Я предполагаю, что объявление типа неверно, но я не уверен, как его динамически вводить, не называя каждый возможный класс CSS как экспорт.

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 и AMD, где он представляет exports в этих модульных системах.

Answer 2

Я думаю, единственный способ - использовать:

      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).