umi引入otf字体报错：Module parse failed: Unexpected character ' '

问题描述：

umi项目需要引入otf字体，直接在app.js文件中写入

@font-face {  
  font-family: 'DIDIFD-Black'; 
  src: url('./assets/DIDIFD/DIDIFD-Black.otf');
}

发现报如下错误：

Module build failed (from ./node_modules/@umijs/bundler-webpack/lib/webpack/plugins/mini-css-extract-plugin/src/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 
See https://webpack.js.org/concepts#loaders

解决办法

执行umi webpack命令，可打印出wewebpack配置，由于配置太多，就不粘出来了。全局搜索otf,发现没有对应的配置。

安装 file-loader:

yarn add file-loader -D 

修改 .umirc.ts 文件，在 defineConfig 的对象参数中增加：

chainWebpack(config) {
    ...,
    config.module
      .rule('woff')
      .test(/.(woff|eot|woff2|ttf|otf)$/)
      .use('file-loader')
      .loader('file-loader');
  }

好了，成功~