在 UmiJS 中打包与加载自定义字体
使用 Webpack 打包字体文件的时候需要使用 file-loader 来处理打包文件,在 UmiJS 3 中可通过配置文件中的 chainWebpack 函数来自定义 Webpack 的配置。
- 当然首先你得先装上 file-loader
npm install --save-dev file-loader
- 然后编辑 UmiJS 的配置文件 ./umirc.ts 中的 chainWebpack
export default defineConfig({
// ...
chainWebpack(config){
config.module // 配置 file-loader
.rule('otf')
.test(/.otf$/)
.use('file-loader')
.loader('file-loader');
},
});
- 然后在 less 样式文件中申明字体
@font-face {
font-family: 'Customized Font';
src: url('path/to/font.otf');
}
- 最后在样式中使用申明好的字体
.text-with-customized-font-face {
font-family: 'Customized Font', 'sans-serif';
}