1

custom.css.scss ファイルに @font-face と背景​​画像を含むフォントがいくつかあります。Heroku 用にアセットをプリコンパイルすると、10MB を超える本番 CSS が生成され、Web サイトの速度が低下します。さらに調べてみると、生成された本番 css ファイル内で画像とフォントが base64 でエンコードされていることがわかりました。これを無効にするにはどうすればよいですか?

custom.css.scss からのコード:

@font-face {
    font-family: 'OpenSansCondensedLight';
    src: asset-data-url('opensans-condlight.eot');
    src: asset-data-url('opensans-condlight.eot') format('embedded-opentype'),
         asset-data-url('opensans-condlight.woff') format('woff'),
         asset-data-url('opensans-condlight.ttf') format('truetype'),
         asset-data-url('opensans-condlight.svg') format('svg');
        font-variant: normal;
    font-weight: normal;
    font-style: normal;
}

プロダクションCSSファイルになります：

  @font-face {
    font-family: 'OpenSansCondensedLight';
    src: url(data:application/vnd.ms-fontobject;base64,nM8BALTOAQABAAIAAAAAAAILAwYDBQQCAgQBACwB...
    src: url(data:application/vnd.ms-fontobject;base64,nM8BALTOAQABAAIAAAAAAAILAwYDBQQCAgQBACwB...
    font-variant: normal;
    font-weight: normal;
    font-style: normal; }
4

1 に答える 1

0

sassを使用するasset-data-urlと、アセットが base64 データとしてインライン化されます。それが要点です。

asset-path($relative-asset-path, $asset-class)css ファイルからアセットを参照するには、または同様の方法を使用する必要があります: https://github.com/rails/sass-rails#features

それが heroku で機能しない場合は、すべての構成を確認してください: https://devcenter.heroku.com/articles/rails-asset-pipeline

于 2013-10-21T13:34:31.513 に答える