在打字稿中导入一个尚不存在但将存在于构建目录中的模块

Question

我有打字稿模块和一个组件的 sass 文件，它们存在于一个目录中。打字稿文件将在构建目录中的某个路径进行转换，并且 sass 文件也将在构建目录中的相同路径下编译为 css 文件。现在我想从构建目录中存在的编译文件中导入 css 字符串。但是在用打字稿导入它时，它给出了文件不存在的错误。现在我尝试从中导入的 css 文件确实不存在，但它会相对于构建目录中编译的 javascript 文件存在。如何解决这个问题？

在打字稿文件中，我是这样导入的

import navbarStyles from './navbar.css';

目录结构为

- /navbar
| - navbar.ts
| - navbar.scss

预期结果：我应该能够按预期从 css 文件中导入字符串。

Answer 1

您可以使用 wildcard module declaration。将如下内容放入 css-modules.d.ts 文件（名称无关紧要）的任何位置（通常在根目录中）都可以。

declare module "*.css" {
    const path: string;
    export default path;
    // anything else that the bundler exports
}

如果您还使用 webpack 或类似的东西捆绑 scss，import "./navbar.scss" 也可以。

在打字稿中导入一个尚不存在但将存在于构建目录中的模块

Importing a module in typescript which does't exist yet, but will be present in the build directory

javascript

web-component

typescript

lit-element