带有 webpack 和 angularjs 的材料设计图标加载错误的图标答案

【问题标题】：Material design icons with webpack and angularjs loading wrong icons带有 webpack 和 angularjs 的材料设计图标加载错误的图标
【发布时间】：2015-12-11 10:01:24
【问题描述】：

我正在使用材料设计图标 (https://materialdesignicons.com/) 并在我的 angularjs 应用程序中使用 webpack 加载它们。 Gulp 为我的网页提供服务。我的 webpack 配置文件有以下字体代码：

{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader : 'url-loader' }

我面临的问题是正在呈现的网页显示错误的图标。当我使用 file-loader 而不是 url-loader 时，我会在控制台中收到以下警告。

Failed to decode downloaded font, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

无法找出问题所在。提前致谢。

【问题讨论】：

标签： javascript angularjs gulp material-design webpack

【解决方案1】：

{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }

你可以试试这个字体。这对我有用。

【讨论】：

对于任何挣扎的人来说，这对我来说都是正确的答案。我试图在我的应用程序中使用 bootstrap-material-design，但 webpack 不会打包 Material-Design-Icons。这成功了。谢谢。

【解决方案2】：

试试这两个加载器：

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

【讨论】：