58

私の 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 制限を超えています)。

4

13 に答える 13

142

TL;DRoutput.publicPathたとえば「http://example.com/assets/ 」に設定して、アセットへの絶対パス (完全なホスト名を含む) を使用します。

問題

問題は、動的に読み込まれた CSS BLOB から URL を解析するときに、Chrome が URL を解決する方法にあります。

ページをロードすると、ブラウザーは Webpack バンドル エントリ JavaScript ファイルをロードします。このファイルには ( を使用している場合style-loader)、ページにロードされる CSS の Base64 エンコード コピーも含まれます。

Chrome DevTools に埋め込まれた CSS のスクリーンショット これは、Chrome DevTools でどのように見えるかです

データ URI として CSS にエンコードされているすべての画像またはフォント (つまり、ファイルのコンテンツが CSS に埋め込まれている) については問題ありませんが、 URLによって参照されるアセットについては、ブラウザーがファイルを見つけてフェッチする必要があります。

現在、デフォルトでfile-loader(url-loader大きなファイルの場合は に委任されます) は相対URL を使用してアセットを参照しますが、これが問題です!

Webpack によって生成された相対 URL これらはfile-loaderデフォルトで生成される URL です - 相対 URL

相対 URL を使用すると、Chrome はそれらを含む CSS ファイルに対して相対 URL を解決します。通常はこれで問題ありませんが、この場合、含まれているファイルは にblob://...あり、相対 URL はすべて同じ方法で参照されます。最終的な結果として、Chrome は親 HTML ファイルからそれらを読み込もうとし、HTML ファイルをフォントのコンテンツとして解析しようとしますが、これは明らかに機能しません。

ソリューション

file-loaderプロトコル (「http」または「https」) を含む絶対パスを使用するように強制します。

webpack の設定を変更して、次のものと同等のものを含めます。

{
  output: {
    publicPath: "http://localhost:8080/", // Development Server
    // publicPath: "http://example.com/", // Production Server
  }
}

生成される URL は次のようになります。

ここに画像の説明を入力 絶対URL！

これらの URL は、Chrome と他のすべてのブラウザーで正しく解析されます。

使用するextract-text-webpack-plugin

CSS を別のファイルに抽出する場合は、CSS が適切なファイルに格納され、URL が正しく解決されるため、この問題は発生しないことに注意してください。

于 2015-12-07T12:41:07.350 に答える
15

私にとって問題は正規表現でした。以下は、ブートストラップを機能させるためのトリックです。

{
    test: /\.(woff|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
    loader: 'url-loader?limit=100000'
},
于 2016-11-06T02:05:26.833 に答える
13

ここで @mcortesi によって asnweredとしてcss ローダー クエリから sourceMaps を削除すると、css は blob を使用せずに構築され、データ URL は正常に解析されます。

于 2015-12-22T15:46:29.630 に答える
5

上記の @ user3006381 と同様に、私の問題は相対 URL だけではなく、webpack がファイルを JavaScript ファイルであるかのように配置していたことです。それらの内容はすべて基本的に次のとおりです。

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

実際のフォントではなくフォントディレクトリにあり、フォントファイルはハッシュコードの下の出力フォルダーにありました。これを修正するには、url-loader (私の場合はイメージ プロセッサ) のテストを変更して、fonts フォルダーを読み込まないようにする必要がありました。@will-madden が優れた回答で指摘しているように、webpack.config.js に output.publicPath を設定する必要がありました。

于 2016-04-08T22:49:41.427 に答える
2

私は同じ問題を経験しましたが、理由は異なります。

After Will Madden's solution didn't help, I tried every alternative fix I could find via the Intertubes - also to no avail. Exploring further, I just happened to open up one of the font files at issue. The original content of the file had somehow been overwritten by Webpack to include some kind of configuration info, likely from previous tinkering with the file-loader. I replaced the corrupted files with the originals, and voilà, the errors disappeared (for both Chrome and Firefox).

于 2016-03-28T02:10:14.703 に答える
1

最も簡単な方法は、フォント ファイルを base64 でエンコードすることです。フォントフェイスで使用します。エンコードするには、フォント ファイルがあるフォルダーに移動し、ターミナルで次のコマンドを使用します。

base64 Roboto.ttf > basecodedtext.txt

basecodedtext.txt という名前の出力ファイルが得られます。そのファイルを開きます。その中の空白を削除します。

そのコードをコピーして、次の行を CSS ファイルに追加します。

@font-face {
  font-family: "font-name";
  src: url(data:application/x-font-woff;charset=utf-8;base64,<<paste your code here>>) format('woff');
}

font-family: "font-name"次に、CSS でを使用できます。

于 2019-05-15T13:50:44.920 に答える
0

私の場合、次の行を lambda.js に追加すると {my deployed is on AWS Lambda} に問題が修正されました。

 'font/opentype',
 'font/sfnt',
 'font/ttf',
 'font/woff',
 'font/woff2'
于 2020-02-06T12:24:02.423 に答える