首页 > webpack打包iconfont.css失败

webpack打包iconfont.css失败

开发环节webpack+vue,现在遇到的问题是在打包iconfont时不起作用。
配置如下:

{
test:/\.(woff|svg|eot|ttf)\??.*$/,
/*test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,*/
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

vue中引用css

<style>
@import './assets/css/sm.css';
@import './assets/css/iconfont.css';
.fade-transition {
  transition: opacity .2s ease;
}
.fade-enter, .fade-leave {
  opacity: 0;
}
</style>
@font-face {font-family: "iconfont";
  src:url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */
  url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../fonts/iconfont.svg') format('svg'); /* iOS 4.1- */
}

运行打包后output目录中并没有fonts文件夹产生,感觉字体文件都没有被打包进去。各位同学帮忙分析一下什么问题,谢谢大家啦


问题已经解决,原来我把limit的含义理解错了

If the file is greater than the limit the file-loader is used and all query parameters are passed to it.

我设置的limit:10000 也就是说当文件大于10000/1024 时才会使用url-loader 否则会直接打包成Data Url 格式


你那个font的test表达式能工作么?我怎么觉着有点问题啊,改改试试?

test: /\.(eot|svg|ttf|woff|woff2)\w*/
【热门文章】
【热门文章】