umi中使用iconfont记录

822 阅读1分钟

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
}));