在 TypeScript 中动态导入 SCSS答案

【问题标题】：Dynamically importing SCSS in TypeScript在 TypeScript 中动态导入 SCSS
【发布时间】：2021-01-20 09:35:27
【问题描述】：

我使用 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" 添加到我的类型声明中，但无济于事。

【问题讨论】：

标签： typescript create-react-app tsc

【解决方案1】：

当它位于正确的声明文件中时，使用declare module "*.scss" 将起作用。我把它放在global.d.ts 中，错误就消失了。

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

【讨论】：