將本地 fonts 添加到我的 react typescript package

Question

我在 react js typescript 中創建了一個 npm package 並且我試圖將本地 fonts 添加到 package 但我不斷收到“找不到模塊”錯誤。

我的 package.json：

    {
  "name": "question",
  "version": "1.0.41",
  "description": "description",
  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "types": "./dist/esm/index.d.ts",
  "scripts": {
    "build": "npm run build:esm && npm run build:cjs",
    "build:esm": "tsc",
    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
    "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
    "prettier": "prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"",
    "test": "jest --config jestconfig.json",
    "prepare": "npm run build",
    "prepublishOnly": "npm test && npm run prettier && npm run lint"
  },
  "repository": {
    "type": "git",
    "url": "*****************************************************************"
  },
  "author": "author.",
  "license": "ISC",
  "bugs": {
    "url": "*****************************************************************"
  },
  "homepage": "*****************************************************************",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@types/react": "^18.0.26",
    "@typescript-eslint/eslint-plugin": "^5.48.2",
    "@typescript-eslint/parser": "^5.48.2",
    "axios": "^1.2.2",
    "eslint": "^8.32.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "mobx": "^6.7.0",
    "prettier": "^2.8.3",
    "react": ">=16",
    "react-dom": "^18.2.0",
    "react-loading": "^2.0.3",
    "reactjs-popup": "^2.0.5",
    "styled-components": "^5.3.6",
    "typescript": "^4.9.4"
  },
  "devDependencies": {
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.2.6",
    "@types/styled-components": "^5.1.26",
    "jest": "^29.3.1",
    "jest-canvas-mock": "^2.4.0",
    "jest-environment-jsdom": "^29.3.1",
    "ts-jest": "^29.0.5",
    "typescript-plugin-css-modules": "^4.1.1"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "files": [
    "dist",
    "LICENSE",
    "README.md"
  ]
}

tsconfig.json：

{
"include": ["src", "src/types/*"],
"exclude": [
  "dist",
  "node_modules"
],
"compilerOptions": {
  "module": "esnext",
  "lib": ["dom", "esnext"],
  "importHelpers": true,
  "declaration": true,
  "sourceMap": false,
  "rootDir": "./src",
  "outDir": "./dist/esm",
  "strict": true,
  "noImplicitReturns": true,
  "noFallthroughCasesInSwitch": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "moduleResolution": "node",
  "allowJs": true,
  "jsx": "react",
  "esModuleInterop": true,
  "skipLibCheck": true,
  "forceConsistentCasingInFileNames": true,
  "plugins": [{ "name": "typescript-plugin-css-modules" }],
  "typeRoots" : ["node_modules/@types", "src/types"],
}

}

fonts.tsx 文件：

 import { createGlobalStyle } from 'styled-components'

import Poppins_400 from '/src/assets/fonts/Poppins-Regular.ttf'

const FontStyles = createGlobalStyle`
    @font-face {
        font-family: "Poppins_400";
        src: local("Poppins_400"),
        url(${Poppins_400}) format("truetype");
        font-weight: 400;
    }
`
export default FontStyles

App.tsx 文件：

import React from 'react'
import {  Container, Body } from './styles'
import FontStyles from '../assets/fonts/fonts'

const App = () => {
  return (
    <Container>
      <FontStyles />
      <Body />
    </Container>
  )
}

export default App

我嘗試使用“聲明模塊'*.tff'”添加 fonts.d.ts 文件，但錯誤仍然存在完整消息是： Cannot find module '/src/assets/fonts/Poppins-Regular.ttf' from 'src/assets/fonts/fonts.tsx'

非常感謝任何幫助，以便將 fonts 添加到我的 package。謝謝！

Answer 1

import Poppins_400 from '/src/assets/fonts/Poppins-Regular.ttf'

url(${Poppins_400}) format("truetype");

您正在導入 .ttf 文件，就好像它是一個模塊一樣，但是 Styled Components 'createGlobalStyle' function 需要一個字符串。

將您的 ttf 文件放在項目的公共目錄中，並刪除 import 語句。 然后你可以這樣做：

url("/assets/fonts/Poppins-Regular.ttf") format("truetype");

將本地 fonts 添加到我的 react typescript package

問題描述

1 個解決方案

解決方案1
0 2023-01-25 21:53:44

將本地 fonts 添加到我的 react typescript package

問題描述

1 個解決方案

解決方案1 0 2023-01-25 21:53:44

解決方案1
0 2023-01-25 21:53:44