Question

我的设置是一个简单的Webpack（v1。），包含React，jQuery和Bootstrap（都运行良好）。我试图通过npm i font-awesome -S添加font-awesome。我想最好的解决方案是自动加载它。我只在浏览器中收到控制台错误，说明每个字体文件都有以下内容：

Failed to decode downloaded font: http://localhost:3000/static/fontawesome-webfont.ttf?v=4.7.0
OTS parsing error: invalid version tag

这是我的设置：

webpack.config

...
output: {
  path: path.join(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: 'http://localhost:3000/static/'
},
module: {
  loaders: [
    ....
    { 
      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"
    }
  ]
},
...

app.scss

$fa-font-path: 'http://localhost:3000/static';
@import '../../node_modules/font-awesome/scss/font-awesome.scss';

...然后我在主App.js文件中导入scss文件。

如您所见，我使用file-loader和url-loader作为字体。

很高兴看到static - url中提供的所有文件的列表，有没有办法在控制台中输出该信息？即使问题出在哪里也很难看到。如果字体根本没有加载或只是错误的网址。

Answer 1

在尝试了很多其他方法，以及大量重新安装和检查我的流星和NPM配置后，我刚刚通过清除Chrome中的浏览数据（缓存的图像和文件）然后刷新页面来解决问题。如果您遇到同样的问题并且无法解决问题，那么值得一试

Answer 2

我最近在解决一个非常类似的问题：在我的Meteor应用程序中使用font-awesome（npm包版本）。事实证明，字体文件根本没有加载/提供。

回答你问题的第二部分：字体文件应该在＆＃34;来源＆＃34;标签（在Chrome开发者工具中），如果它们已正确加载。

第一部分比较棘手，我没有解决方案，只是一个提示：由于您的字体文件似乎没有加载，我会得出结论，网络包没有＆＃34;＃34;见＆＃34;字体文件。要么＆＃34; node_modules＆＃34;在您的配置中的某处被排除，或者字体很棒的npm包没有正确导出字体文件。或介于两者之间。

我的问题很相似：来自＆＃34; node_modules＆＃34;内的静态内容文件夹并未被Meteor的内部捆绑包承认。所以我的解决方法是创建一个npm＆＃34; postinstall＆＃34; package.js中的脚本将字体文件复制到适当的位置：＆＃34; PATH_OF_MY_APP / public / fonts＆＃34;在我的情况下，捆绑者可以拿起它们。

使用Webpack加载Font-Awesome（OTS解析错误：无效的版本标记）

2 个答案: