web-dev-qa-db-ja.com

TypeScriptでローカルフォントをインポートできない

TypeScriptプロジェクトでReactにフォントファイルをインポートしようとしていますが、フォントファイルとして認識されませんが、モジュールとして認識されます。

フォルダー構造：

enter image description here

私のindex.tsxファイルで、必要なフォントをインポートし、Font定数をエクスポートしました。

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-loaderを使用しています（私もfile-loaderで試しました）。これは私の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'

この問題の原因は何ですか？

reactjstypescriptwebpack
11
Nemus

TypeScriptで正しく解析できるように、フォントファイル形式をモジュールとして宣言する必要があります。

fonts.d.tsファイルを作成し、以下を追加します

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

TypeScriptに、フォントファイルタイプが有効なインポートモジュールであることを伝えます。

「d.ts」ファイル形式は、JavaScriptで記述されたAPIに関するTypeScriptタイプ情報、またはサードパーティのインポートの形状を提供するために使用されます。

タイプファイルがtsconfig.jsonのincludeセクションで考慮されていることを確認してください。いい方法は、プロジェクトにルートtypingsディレクトリを作成し、includeにtypings/**/*.d.tsを追加することです。

23
Bradly Locking