开发一个新的项目,配置了webpack+typescript+react+postcss

webpack 升级到了最新版3.4.1

然后在加载字体的时候出现了问题,css中引入了字体,可以是字体没有起作用,查看生成的代码发现

@font-face {
  font-family: Mrs Eaves XL Serif;
  font-style: normal;
   /* Font file paths are broken */
  src: url([object object]) format("woff2"), 
    url([object object]) format("woff"), 
    url([object object]) format("truetype")
}
  1. 因为是第一次使用postcss,以为是postcss的问题。但是查遍postcss插件没有发现关于这部分的介绍,遂删除掉postcss,只加载css。未解决,放弃。
  2. 使用了extract-text-webpack-plugin,以为是单独分离这块内容导致的问题,去掉这个插件之后,未解决,放弃。
  3. 以为是file-loader的配置问题,反复修改字体扩展名配置,未解决,放弃。
  4. file-loader换成url-loader,未解决,放弃
  5. 以为是typescript的问题,删除掉typescript,未解决放弃
  6. 以为是webpack版本bug,换成低版本webpack,未解决,放弃
  7. 以为是公司内部npm镜像的问题,修改镜像安装。未解决,放弃

到这里,笔者已经基本崩溃了。已经快搞一上午了,任务还没开始。

然后,笔者并没有放弃!!!

通过比对之前一个可以运行的项目,发现:两个项目的依赖包都是重新安装的,一个就可以,一个就不行。再仔细比对依赖包发现file-loader的版本好像不一样,遂拷贝一份过来。哈哈,可以了。

原来file-loader 升级到了1.0.0,导致了这个bug。网上好像搜不到这个bug的相关描述,但是在file-loader的github上有人提了这个issues。原来看issues也是解决问题的途径之一。

所以这个问题的解决方式就是把file-loader版本降到1.0.0以下就可以了


frontoldman
4.5k 声望1.3k 粉丝

前端开发者