Невозможно импортировать локальные шрифты с помощью TypeScript

Question

Я пытаюсь импортировать файлы шрифтов в React с проектом TypeScript, но он не распознает его как файл шрифта, но вместо этого он смотрит на него как на модуль

Структура папки:

В моем файле index.tsx я импортировал нужный шрифт и экспортировал постоянную шрифта:

import helveticaNeueLightWoff from './HelveticaNeueW02-45Ligh.woff';
import helveticaNeueLightWoff2 from './HelveticaNeueW02-45Ligh.woff2';
import helveticaNeueMediumWoff from './HelveticaNeueW02-67MdCn.woff';
import helveticaNeueMediumWoff2 from './HelveticaNeueW02-67MdCn.woff2';
import helveticaNeueBoldWoff from './HelveticaNeueW02-75Bold.woff';
import helveticaNeueBoldWoff2 from './HelveticaNeueW02-75Bold.woff2';
import helveticaNeueBoldCnWoff from './HelveticaNeueW02-77BdCn.woff';
import helveticaNeueBoldCnWoff2 from './HelveticaNeueW02-77BdCn.woff2';

const Fonts = {
  helveticaNeueLightWoff,
  helveticaNeueLightWoff2,
  helveticaNeueMediumWoff,
  helveticaNeueMediumWoff2,
  helveticaNeueBoldWoff,
  helveticaNeueBoldWoff2,
  helveticaNeueBoldCnWoff,
  helveticaNeueBoldCnWoff2,
};

export default Fonts;

Я использую URL-загрузчик (я тоже пробовал с файловым загрузчиком).Это мой webpack.config.ts

{
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          use: {
            loader: 'url-loader',
            options: {
              // Limit at 50k. Above that it emits separate files
              limit: 50000,
              // url-loader sets mimetype if it's passed.
              // Without this it derives it from the file extension
              mimetype: 'application/font-woff',
              // Output below fonts directory
              name: './fonts/[name].[ext]',
            },
          },
        },

Это ошибка, которую я получаю: Cannot find module './HelveticaNeueW02-45Ligh.woff'

В чем может быть причина этой проблемы?

Answer 1

Вам необходимо объявить форматы файлов шрифтов как модули, чтобы TypeScript мог их правильно анализировать.

создайте файл fonts.d.ts и добавьте в него следующее

declare module '*.woff';
declare module '*.woff2';

Это говоритНапечатайте, что типы файлов шрифтов являются действительными модулями импорта.

Формат файла "d.ts" используется для предоставления информации о типе машинописного текста об API, написанном на JavaScript, или о форме импорта сторонних производителей.

Убедитесь, что файл типов рассматривается в разделе include в tsconfig.json.Хороший подход заключается в том, чтобы иметь корневой каталог typings в вашем проекте, а затем добавить typings/**/*.d.ts в include.