我正在try 在React with TypeScript项目上导入字体文件,但它没有将其识别为字体文件,而是将其视为一个模块
文件夹 struct :
在我的索引中.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加载器(我也try 使用文件加载器).这是我的网页包.配置.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'
这个问题的原因可能是什么?