禁止 rails 将背景图片嵌入 CSS答案

【问题标题】：Disable rails from embedding background images into CSS禁止 rails 将背景图片嵌入 CSS
【发布时间】：2013-10-20 20:16:35
【问题描述】：

我的 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; }

【问题讨论】：

你说你的 SCSS 中有一些字体和背景是什么意思？你能发布你的包含吗？
是的，一些代码会很好:)
你试过“asset-url('opensans-condlight.eot');”而不是“资产数据网址”？
@RichPeck：是的，这让我在 Heroku 上丢失了文件。它会查找原始文件而不是预编译文件。

标签： css ruby-on-rails heroku

【解决方案1】：

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

【讨论】：

是的，我想通了。只是没有一个助手似乎与heroku一起工作。我最终将原始图像放在公用文件夹中。