Dynamically importing SCSS in TypeScript

Question

I've used Create React App (CRA) to set up a new project, then added node-sass to be able to import SCSS files.

Example:

import "./App.scss";

While this works fine, I cannot load styles asynchronously using import(). I've used this technique in a pure JavaScript project, but since converting it TypeScript I get the following compiler error:

Cannot find module './fallback.scss' or its corresponding type declarations. TS2307

Here's a MVE of the code producing the problem:

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

I've already tried adding declare module "*.scss" to my type declarations, but to no avail.

Answer 1

Using declare module "*.scss" will work, when it's in the correct declarations file. I've put it in global.d.ts and the error went away.

I'm still wondering why static imports worked out of the box, so feel free to post a more in-depth answer!