TypeScript를 사용하여 로컬 글꼴을 가져올 수 없음

TypeScript를 사용하여 로컬 글꼴을 가져올 수 없음

React with 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-loader를 사용한다(파일-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'

이 문제의 원인은 무엇일까?

글꼴 파일 형식을 모듈로 선언하여 TypeScript가 올바르게 구문 분석할 수 있도록 해야 한다.

a를 창조하다.fonts.d.ts철하여 다음과 같이 덧붙이다.

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

그것은 TypeScript에 글꼴 파일 형식이 유효한 가져오기 모듈임을 알려준다.

"d.ts" 파일 형식은 JavaScript로 작성된 API 또는 제3자 가져오기 형태에 대한 형식 정보를 제공하는 데 사용된다.

형식 파일이 에서 고려되는지 확인하십시오.include을 분할하다.tsconfig.json좋은 접근법은 뿌리를 갖는 것이다.typings프로젝트의 디렉터리, 그런 다음typings/**/*.d.ts에 관하여include.

비슷한 문제에 직면하게 될 엑스포 사용자를 위한 이전 답변 완료: 나도 같은 문제에 직면했고, 모듈 선언은 글꼴을 수입하기는 충분했지만 실제로 로딩하지는 않았다.나는 사용하고 있었다.expo-font, 그리고 Typecript는 결과의 유형에 대해 불평하고 있었다.작동하기 위해 다음 컨텐츠로 같은 파일을 작성했다.

declare module "*.ttf" {
  const value: import("expo-font").FontSource;
  export default value;
}

이는 가져온 모듈의 유형이FontSource로부터 오는expo-font도서관의그때 글꼴을 로드할 수 있었다 :)

참조URL: https://stackoverflow.com/questions/53742766/cannot-import-local-fonts-with-typescript