Ant Design Pro使用踩坑指南（持续更新...）使用 Webpack 打包字体文件的时候需要使用 file-l

一、Ant Design Pro中打包与加载otf自定义字体

使用 Webpack 打包字体文件的时候需要使用 file-loader 来处理打包文件，在ant design pro中可通过配置文件中的 chainWebpack 函数来自定义 Webpack 的配置。

1、安装 file-loader

npm install --save-dev file-loader

2、编辑ant design pro的配置文件 config/config.ts 中的 chainWebpack

export default defineConfig({
  // ...
  chainWebpack(config){
    config.module // 配置 file-loader
      .rule('otf')
      .test(/.otf$/)
      .use('file-loader')
      .loader('file-loader');
  },
});

3、在 less 样式文件中申明字体

@font-face {
  font-family: Pangram-Black;
  src: url('../font/Pangram-Black.otf'), url('../font/Pangram-Black.otf');
  font-display: swap;
}

4、使用申明好的字体

.fontFamilyPangramBlack {
  font-weight: 700;
  font-family: Pangram, Pangram-Black;
}

注意

在less文件中使用@import引用src内的文件时需要这样引入，因为CSS loader 会把把非根路径的url解释为相对路径，加~前缀才会解释成模块路径。

@import "~@/assets/style/_mixin";

二、Ant Design Pro离线引用iconfont,包含菜单和组件中使用

由于官方的案例都是基于网络的js文件，关于本地离线引入的案例很少，而且各种文章说的都不一样，还有修改源码的，这个明显很不方便。其实并不需要那么复杂，只要你把下载的iconfont.js放在public目录下，然后在对应的地方引入一下即可。

1、下载`iconfont`文件

从iconfont生成文件并下载后，iconfont.js放到pubilc目录下

2、配置菜单中使用的icon

配置文件config/defaultSettings,直接写上就行了，会自动加载public中的iconfont.js

...
iconfontUrl: 'iconfont.js',
...

3、配置组件中使用的icon

组件中使用需要项目里安装@ant-design/icons

yarn add @ant-design/icons --save // 或者 npm i @ant-design/icons --save

import { createFromIconfontCN } from "@ant-design/icons"

const IconFont = createFromIconfontCN({
  scriptUrl: 'iconfont.js', // 也是直接iconfont.js
});

function IconExample() {
    return (
        <IconFont type="你的图标名"/>
    )
}

使用Ant Design Pro开发时，发现安装依赖没有用，刷新也不行

由于Ant Design Pro在开发时为了提高构建速度会使用缓存，所有在重复安装某一个依赖，或者依赖多次被更换版本的时候，会默认使用缓存中的数据。这就导致有时候刷新没有用。

解决办法：删除生成的dist文件和src/.umi目录，重新跑一下项目就可以了

Ant Design Pro使用踩坑指南（持续更新...）