在 TypeScript 中动态导入 SCSS

Question

我使用 Create React App (CRA) 设置了一个新项目，然后添加了 node-sass 以便能够导入 SCSS 文件。

示例：

import "./App.scss";

虽然这工作正常，但我无法使用 import() 异步加载样式。我在纯 JavaScript 项目中使用了这种技术，但是自从将其转换为 TypeScript 后，我得到以下编译器错误：

Cannot find module './fallback.scss' or its corresponding type declarations. 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 中，错误消失了。

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

在 TypeScript 中动态导入 SCSS

Dynamically importing SCSS in TypeScript

typescript

tsc

create-react-app