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

Question

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

我正在编写一个打字稿迁移脚本，我想通过ts-node. 理想情况下，我的代码库的组织方式应使脚本的依赖项永远不会接触 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.

我发现的唯一先例是 jest，它有一些用于模拟 css 模块的配置选项，因此它可以毫无错误地导入这些文件： https: //jestjs.io/docs/webpack。

如何运行依赖于 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有关Missing Types。不幸的是，即使使用该指令，我也无法使其工作。ts-node--files