What steps can be taken to prioritize files with specific extensions in webpack?

Question

What steps can be taken to prioritize files with specific extensions in webpack?

I have a dilemma with two files:

- somefile.scss
- somefile.scss.ts

When importing the file in my typescript code, it is referencing the wrong one:

import styles from "somefile.scss"

The typescript part works fine with the correct import (.scss.ts), but webpack chooses the incorrect one (.scss)

Is there a way to prioritize the .scss.ts file over the .scss file (both located in the same directory and unable to be renamed or moved)?

I've attempted tweaking the resolve configuration with no luck:

// unsuccessful
resolve: {
  extensions: [".scss.ts", ".ts"]
}

// also not effective
resolve: {
  extensions: ["*", ".ts"]
}

typescript webpack sass

Answer 1

Answer №1

In my opinion, the most straightforward and readable approach is to simply import the file using its full name:

import styles from "somefile.scss.ts"

This way, you won't have to second guess which file is being imported and in case someone makes changes to the resolve webpack configuration later on, the build is less likely to be affected.

If you do want to specify the resolve.extensions option, it should be written as follows:

    ...
    resolve: {
        // the last `...` is optional if you wish 
        // to maintain the default webpack extension resolution
        extensions: [".ts", "", "..."]
    }
    ...

Answer 2

In my opinion, the most straightforward and readable approach is to simply import the file using its full name:

import styles from "somefile.scss.ts"

This way, you won't have to second guess which file is being imported and in case someone makes changes to the resolve webpack configuration later on, the build is less likely to be affected.

If you do want to specify the resolve.extensions option, it should be written as follows:

    ...
    resolve: {
        // the last `...` is optional if you wish 
        // to maintain the default webpack extension resolution
        extensions: [".ts", "", "..."]
    }
    ...

What steps can be taken to prioritize files with specific extensions in webpack?

Answer №1

Similar questions

Troubleshooting Azure typescript function: Entry point for function cannot be determined

The correct way to incorporate a global property into a component template (using Vue 3, Vite, TypeScript, and the Composition API)

Converting an Observable variable to a specific type in Typescript

Entry module could not be located due to an unresolved 'babel-loader' error

Ways to eliminate the white background gap between pages on ionic

The parameter type 'IScriptEditorProps' does not accept arguments of type 'string'

What is the best way to convert the NextJS router.query.id to a string?

The value of Angular Input remains unchanged within a FormArray

Why is it that Angular is unable to locate the component factory for my component, even though I have declared it in the entryComponents option of my Module?

Troubleshooting import errors with Typescript for C3 and D3 libraries

Angular 2- Unable to bind to 'ngSwitchCase' as it is not recognized as a native property

Exploring the power of flow.js within an Angular 2 Typescript project

The issue with converting a string into an object in Typescript

Mastering ngClass for validation in Angular 2: Step-by-step guide

Issue encountered: XHR error (404 Not Found) occurred following the installation of typescript-collection in Angular 2 final version

Having trouble with errors when trying to implement react-router-v6 with typescript

Crafting a model for arrays of objects - a guide to perfection

Navigating with Angular's router occurs before the guard is fully completed

Nuxt's production mode delays resource loading

Using TypeScript to create a generic function that returns a null value