TypeScript не может разрешить файл шрифтов

Question

Я некоторое время пытался импортировать шрифт в TypeScript, и я не могу понять, что я делаю неправильно. Я просматривал несколько связанных вопросов, но решения, похоже, не работают для меня.

моя структура файловых каталогов такова:

├── 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

В веб-пакете:

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

В файле fonts.scss:

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

в файле custom.d.ts:

declare module '*.ttf';

Когда я запускаю свой сервер разработки, я не получаю никаких ошибок, хотя Intellisenseв IntelliJ говорит Cannot resolve file 'Pixel-Noir.tff в моем файле fonts.scss, который, кажется, проблема. Проект загружается, и я не получаю никаких ошибок в консоли, он просто не загружает шрифт.

Я ценю любую помощь, дайте мне знать, если требуется дополнительная информация.

Редактировать: ЭтоБыло высказано предположение, что это может быть дубликатом этого вопроса , но решением этого вопроса было выделение различных исходных файлов в определении шрифта-лица. У меня есть только один исходный файл, поэтому он настолько разделен, насколько это возможно. Загрузчики файлов также отличаются в его конфигурации webpack. Я могу попытаться использовать их, но у меня есть ощущение, что это может быть устаревшим, так как этому вопросу уже три года.