运行导入 css 模块的 ts-node 脚本

Question

如何运行导入 css 模块的脚本？

我正在编写一个我想通过ts-node运行的 typescript 迁移脚本。 理想情况下，我的代码库会被组织成脚本的依赖项永远不会触及 React 组件，但事实并非如此。 该脚本最终导入 React 组件和 css 模块，因此ts-node失败，因为它不理解 css 模块：

RenderableInline.tsx(4,20): error TS2307: Cannot find module './styles/RenderableInline.module.scss' or its corresponding type declarations.

只有 webpack 了解如何构建 css 模块，因为我已经通过css-loader对其进行了配置。

我发现的唯一先例是开玩笑，它有一些 mocking 和 css 模块的配置选项，因此它可以毫无错误地导入这些文件：Z5E056C500A1C4B6A7110B50D807BADEwebpack5Z.io .

如何运行依赖于 css 模块的 typescript 脚本？ 有没有办法通过ts-node做到这一点？ 还是 webpack 有一些脚本运行功能？

Answer 1

添加一个全局.d.ts文件，提供有关如何处理.css文件的指导。

如src/global.d.ts有如下内容：

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

添加typescript-plugin-css-modules插件也可能会有所帮助。 请注意，这仅在使用 VSCode 进行开发期间有帮助，但在编译期间无效。

---

尽管我通常可以正常工作，但要使其与ts-node-dev正常工作，我仍然面临问题-可能与ts-node默认情况下未加载这些类型文件有关Missing Types 。 不幸的是，即使使用--files指令，我也无法让它工作。