在 TypeScript 中动态导入 SCSS

Question

我已经使用 Create React App (CRA) 设置了一个新项目，然后添加了

node-sass

以便能够导入 SCSS 文件。

例子：

import "./App.scss";

虽然这工作正常，但我无法使用

import()

异步加载样式。我在一个纯 JavaScript 项目中使用了这种技术，但是自从将它转换为 TypeScript 后，我得到了以下编译器错误：

找不到模块“./fallback.scss”或其相应的类型声明。 TS2307

这是产生问题的代码的 MVE：

async function loadFallbackStyles(): Promise<void> {
    if (window.navigator.userAgent.includes("Trident/")) {
        await import("./fallback.scss");
    }
}

我已经尝试将

declare module "*.scss"

添加到我的类型声明中，但无济于事。

Answer 1

使用

declare module "*.scss"

将工作，当它在正确的声明文件中。我把它放在

global.d.ts

中，错误消失了。

我仍然想知道为什么静态导入开箱即用，所以请随时发布更深入的答案！

Answer 2

idleberg 的回答 当我正在为类似的事情而苦苦挣扎时，让我走上了正确的道路，所以让我把它分享给那些不幸面临同样问题并且

global.d.ts

的技巧不起作用的人：

上下文

我正在向现有的 React SPA 添加打字稿。在某些页面中，使用 Dynamic Import 从几个

md

文件中加载内容。

导入是这样的：

const dynamicaLoadContentPromise = import('../path/to/file.md')

当试图将该页面从

jsx

迁移到

tsx

时，这些

import

s 进入编译错误：

找不到模块“../path/to/file.md”或其相应的类型声明。 TS(2307)

修复

感谢 github 上这个问题的讨论，我发现创建一个文件

typings.d.ts

声明扩展可以解决这个问题：

declare module "*.md" {
    const value: string;
    export default value;
}

它让整个事情再次运作。