1

我的 custom.css.scss 文件中有一些带有 @font-face 和背景图像的字体。当我为 Heroku 预编译资产时，我得到一个大于 10MB 的生产 css，这会使我的网站慢下来。经过进一步检查，我发现图像和字体在生成的生产 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

如果您使用asset-data-urlsass 会将您的资产内联为 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 回答