在 TypeScript 中动态导入 SCSS

问题描述

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

解决方法

在正确的声明文件中使用 declare module "*.scss" 会起作用。我已经把它放在 global.d.ts 中，错误消失了。

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

create-react-app tsc typescript typescript typescript