webpack - TypeScript nu poate rezolva fișierul Font

Am încercat de ceva vreme să import un font în TypeScript și nu reușesc să înțeleg ce fac greșit. Am verificat câteva întrebări similare, dar soluțiile nu par să funcționeze pentru mine.

Structura directorului meu de fișiere este următoarea:

├── package.json
├── src
│   ├── assets
│   │   ├── logo.png
│   │   └── menu_background.jpg
│   ├── fonts
│   │   └── Pixel-Noir.ttf
│   ├── index.html
│   ├── main.ts
│   ├── menu.scene.ts
│   └── styles
│       └── fonts.scss
├── tsconfig.json
└── webpack.config.js

În webpack:

module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader'
      }
    ]

În fonts.scss:

@font-face {
  font-family: 'game-font';
  src: url('../fonts/Pixel-Noir.tff') format('truetype');
}

în custom.d.ts:

declare module '*.ttf';

Când rulez serverul meu de dezvoltare, nu primesc niciun fel de erori, deși Intellisense în IntelliJ spune Nu se poate rezolva fișierul 'Pixel-Noir.tff' în fișierul meu fonts.scss, ceea ce pare să fie problema. Proiectul se încarcă și nu primesc erori în consolă, doar că fontul nu se încarcă.

Apreciez orice ajutor, anunță-mă dacă este nevoie de mai multe informații.

Editare: S-a sugerat că aceasta ar putea fi o duplicată a acestei întrebări, dar soluția pentru acea întrebare a fost să se separe diferitele fișiere sursă în definiția font-face. Eu am doar un singur fișier sursă, deci este cât de separat se poate. Loader-ele de fișiere sunt, de asemenea, diferite în configurația sa webpack. Pot încerca să le folosesc, dar simt că poate fi depășită, deoarece acea întrebare are deja trei ani.

Răspuns #1

În cazul meu, răspunsul a fost să schimb definiția tipului de modul în custom.d.ts în:

declare module "*.woff2" {
  const value: any;
  export = value;
}

Mi-aș imagina că același lucru s-ar aplica dacă ai folosi *.ttf în schimb.