Importing SCSS files dynamically with TypeScript

Question

Importing SCSS files dynamically with TypeScript

Recently, I utilized Create React App (CRA) to create a new project and then included node-sass in order to import SCSS files.

An example:

import "./App.scss";

Although this method works without any issues, I encountered a problem when trying to load styles asynchronously using import(). In a previous JavaScript project, I successfully used this technique. However, after converting it to TypeScript, I started receiving the following compiler error:

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

Below is a Minimal Viable Example showcasing the problematic code:

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

I attempted to resolve this issue by adding

declare module "*.scss"

to my type declarations, but unfortunately, that did not solve the problem.

typescript create-react-app tsc

Answer 1

Answer №1

After putting

declare module "*.scss"

in the appropriate declarations file, specifically in global.d.ts, the issue was resolved. However, the seamless functioning of static imports still perplexes me. If anyone has a detailed explanation, please share it!

Answer 2

After putting

declare module "*.scss"

in the appropriate declarations file, specifically in global.d.ts, the issue was resolved. However, the seamless functioning of static imports still perplexes me. If anyone has a detailed explanation, please share it!

Answer 3

Answer №2

idleberg's response provided the solution I needed when facing a similar challenge. I wanted to share it for others encountering the same issue and finding that the global.d.ts workaround was not effective:

Situation

I am introducing TypeScript into an existing React Single Page Application (SPA). A few pages utilize Dynamic Import to retrieve content from several md files.

The imports appeared as follows:

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

Transitioning these imports from jsx to tsx resulted in a compilation error:

Cannot locate module '../path/to/file.md' or its corresponding type declarations. ts(2307)

Solution

A discussion on this github issue led me to realize that creating a file named typings.d.ts, declaring the extension, resolved the problem:

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

This simple fix restored functionality to the entire process.

Answer 4

idleberg's response provided the solution I needed when facing a similar challenge. I wanted to share it for others encountering the same issue and finding that the global.d.ts workaround was not effective:

Situation

I am introducing TypeScript into an existing React Single Page Application (SPA). A few pages utilize Dynamic Import to retrieve content from several md files.

The imports appeared as follows:

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

Transitioning these imports from jsx to tsx resulted in a compilation error:

Cannot locate module '../path/to/file.md' or its corresponding type declarations. ts(2307)

Solution

A discussion on this github issue led me to realize that creating a file named typings.d.ts, declaring the extension, resolved the problem:

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

This simple fix restored functionality to the entire process.

Importing SCSS files dynamically with TypeScript

Answer №1

Answer №2

Situation

Solution

Similar questions

IntelliSense in VSCode is unable to recognize the `exports` property within the package.json file

Tips for preventing the error message "The property 'map' is not present on type 'string | string[]'."

Encountering a runtime issue with socket.io when using typescript that has been bundled by

A guide to effectively utilizing a TypeScript cast in JSX/TSX components

Ways in which this data can be best retrieved

Leveraging getStaticProps in Next.js

The functionality of the Angular directive ngIf is not meeting the desired outcome

The "if(x in obj)" statement in Typescript does not properly narrow down my custom Record

Angular's AsyncValidatorFn is triggered by the onblur event and does not work with keypress events

What is the reason behind TypeScript condition type not functioning properly with optional parameters?

What is the best way to prevent a font awesome icon from appearing in a span during data loading

Encountering an error in a map operation does not hinder the subsequent map operation from being carried out

Unlinked Typescript blob file name

How can I obtain the model values for all cars in the primary object?

Error: The property '...' is not found in the ReactElement<any, any> type, but it is required in the type '{...}'

The type inference in TypeScript sometimes struggles to accurately determine the type of an iterable

Discovering the ReturnType in Typescript when applied to functions within functions

Unit Testing with Angular: Testing the setValueControl function

Understanding NestJS Mixins and Their Distinction from Inheritance

Is it possible to swap out the Firestore module `doc` with the `document` module