1、下载iconfont到项目里
2、将iconfont.css 改为 iconfont.less
3、将 iconfont.less里的css包裹在:global里
:global {
// 本身的内容
...
}
4、在全局css文件中如global.less里引入iconfont.less
PS:
1、加global是防止iconfont里定义的class编译后被加上hash
2、如果你的应用有publicPath,umi默认是不会给css、less里引用的静态资源加上publicPath的(包括iconfont.less里引入的字体文件),需要在config.prod.ts里配置chainWebpack
const publicPath = 'your path';
config.module.rule('css').oneOf('css').use('extract-css-loader').tap(() => ({
publicPath,
hmr: false
}))
config.module.rule('less').oneOf('css').use('extract-css-loader').tap(() => ({
publicPath,
hmr: false
}))
config.module.rule('less').oneOf('css-modules').use('extract-css-loader').tap(() => ({
publicPath,
hmr: false
}));