开发一个新的项目,配置了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")
}
- 因为是第一次使用postcss,以为是postcss的问题。但是查遍postcss插件没有发现关于这部分的介绍,遂删除掉postcss,只加载css。未解决,放弃。
- 使用了extract-text-webpack-plugin,以为是单独分离这块内容导致的问题,去掉这个插件之后,未解决,放弃。
- 以为是file-loader的配置问题,反复修改字体扩展名配置,未解决,放弃。
- file-loader换成url-loader,未解决,放弃
- 以为是typescript的问题,删除掉typescript,未解决放弃
- 以为是webpack版本bug,换成低版本webpack,未解决,放弃
- 以为是公司内部npm镜像的问题,修改镜像安装。未解决,放弃
到这里,笔者已经基本崩溃了。已经快搞一上午了,任务还没开始。
然后,笔者并没有放弃!!!
通过比对之前一个可以运行的项目,发现:两个项目的依赖包都是重新安装的,一个就可以,一个就不行。再仔细比对依赖包发现file-loader的版本好像不一样,遂拷贝一份过来。哈哈,可以了。
原来file-loader 升级到了1.0.0,导致了这个bug。网上好像搜不到这个bug的相关描述,但是在file-loader的github上有人提了这个issues。原来看issues也是解决问题的途径之一。
所以这个问题的解决方式就是把file-loader版本降到1.0.0以下就可以了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。