Webpack“ OTS解析错误”加载字体

CSS Webpack

Gil逆天

2020-03-23

我的webpack配置指定应使用加载字体url-loader，而当我尝试使用Chrome浏览页面时，出现以下错误：

OTS parsing error: invalid version tag
Failed to decode downloaded font: [My local URL]

我的配置的相关部分如下所示：

{
  module: {
    loaders: [
      // ...
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],
      },
      {
        test: /images\/.*\.(png|jpg|svg|gif)$/,
        loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
      },
      {
        test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'file-loader?name="[name]-[hash].[ext]"',
      }
    ],
  },
}

在Safari中不会发生这种情况，而且我还没有尝试过Firefox。

在开发中，我通过提供文件webpack-dev-server，在生产中，它们被写入磁盘并复制到S3；在这两种情况下，我在Chrome中的行为都相同。

这也适用于较大的图像（大于图像加载器配置中的10kB限制）。

第3112篇《Webpack“ OTS解析错误”加载字体》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
Tom凯 2020.03.23

截至2018年，

use MiniCssExtractPlugin

对于Webpack（> 4.0）将解决此问题。

https://github.com/webpack-contrib/mini-css-extract-plugin

利用extract-text-webpack-plugin在接受的答案是不推荐的WebPack 4.0+。

梅 2020.03.23

如果您使用的是Angular，则需要检查以确保您的

<base href="/">

标记位于样式表包之前。我从这里切换了代码：

 <script src="~/bundles/style.bundle.js"></script>
 <base href="~/" />

对此：

 <base href="~/" />
 <script src="~/bundles/style.bundle.js"></script>

并且问题得以解决。感谢这篇文章让我睁开了眼睛。

猪猪 2020.03.23

我遇到了相同的问题，但是原因不同。

在威尔·麦登的解决方案无济于事之后，我尝试了所有可以通过Intertubes找到的替代解决方案-也无济于事。进一步研究，我只是打开了一个有争议的字体文件。Webpack已以某种方式覆盖了文件的原始内容，以包含某种配置信息，这可能是由于先前对文件加载器的修改。我用原始文件替换了损坏的文件，瞧瞧，错误消失了（对于Chrome和Firefox）。

村村 2020.03.23

与上面的@ user3006381一样，我的问题不仅是相对URL，而是webpack像放置JavaScript文件一样放置文件。它们的内容基本上都是：

module.exports = __webpack_public_path__ + "7410dd7fd1616d9a61625679285ff5d4.eot";

在字体目录中而不是在实际字体中，并且字体文件在哈希代码下的输出文件夹中。要解决此问题，我必须在url加载程序（在我的情况下为图像处理器）上更改测试，以不加载字体文件夹。我仍然必须将webpack.config.js中的output.publicPath设置为@ will-madden的出色回答。

Tony樱 2020.03.23

我知道这不能回答OP的确切问题，但我来到这里的症状相同，但原因不同：

我包含了Slick Slider的.scss文件，如下所示：

@import "../../../node_modules/slick-carousel/slick/slick.scss";

仔细检查后发现，它试图从无效位置（<host>/assets/css/fonts/slick.woff）加载字体，这是从样式表中引用字体的方式。

我最终只是将拷贝/font/到了我assets/css/，问题就为我解决了。

神无 2020.03.23

就像@mcortesi 在这里要求的那样，如果您从css加载程序查询中删除sourceMaps，则将在不使用blob的情况下构建css，并且将对数据URL进行很好的解析。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android