使用 Rails 3.1 时如何在 Sass 中使用参考图像？答案

【问题标题】：How do I use reference images in Sass when using Rails 3.1?使用 Rails 3.1 时如何在 Sass 中使用参考图像？
【发布时间】：2011-06-18 01:36:38
【问题描述】：

我有一个 Rails 3.1 项目，资产管道运行良好。问题是我需要在我的 Sass 中引用图像，但 Rails 会计算图像 URL。（这在生产环境中尤为重要，Rails 将图像的 Git 哈希值附加到其文件名中以进行缓存。）

例如在app/assets/stylesheets/todos.css.scss:

.button.checkable { background-image: url(/assets/tick.png); }

当我部署（或运行rake assets:precompile）时，文件app/assets/images/tick.png 被移动到public/assets/tick-48fe85c0a.png 或类似的东西。这打破了CSS。 This post 提出两个建议：

不要对图片使用资产管道 - 而是将它们放在 public/images/ 中并直接引用它们
为您的 CSS 使用 ERB，并让 Rails 计算出图像 URL。

第 1 号当然是可能的，尽管这意味着我的图像不会被缓存破坏。第 2 项已退出，因为我使用的是 Sass，而不是 ERB 来处理文件。

【问题讨论】：

标签： ruby-on-rails css ruby-on-rails-3 sass sprockets

【解决方案1】：

以下应该可以解决问题：

.button.checkable { background-image: url(image_path('tick.png')); }

Rails 实际上提供了一堆帮助器来引用资产：

image-url('asset_name')
audio-path('asset_name')

一般

[asset_type]-url('asset_name') #Becomes url('assets/asset_name')
[asset_type]-path('asset_name') #Becomes 'assets/asset_name'

asset_type 可以是以下之一：图像、字体、视频、音频、javascript、样式表

【讨论】：

只是一个小修正：您需要在 sass 或 scss 中使用 {asset_type}-url 或 -path，而不是 _path（破折号而不是下划线）（请参阅github.com/rails/sass-rails#features）

【解决方案2】：

sass-rails gem 定义了可以在 Sass 中使用的 Sass 函数，无需 ERB 处理。 https://github.com/rails/sass-rails

【讨论】：

【解决方案3】：

对于那些赞成加快用户加载时间的人，我建议您按照 Steve Souders 的提示在 base64 中加载 CSS 中的图像。

asset-data-url('路径')

https://github.com/rails/sass-rails#asset-helpers

【讨论】：

【解决方案4】：

选项 2 的变体将起作用。如果你有这样的事情：

app/assets/stylesheets/pancakes_house.css.less.erb

然后您将 require 放入您的 application.css 文件中。然后pancakes_house首先通过ERB，然后输出通过LESS处理器，然后输出到你的CSS。将 ERB 放入您的 SCSS 中可能会感觉有点奇怪，但是，嘿，它会工作并完成工作而不会太奇怪。

因此，您应该能够获得必要的方法来通过您的 ERB 生成缓存破坏图像路径。

我只对 Less 文件进行了尝试，但它也应该适用于 .css.scss.erb。

顺便说一句，你也可以加your own functions to SASS：

此模块中的方法可以从 SassScript 上下文中访问。例如，你可以写
$color = hsl(120deg, 100%, 50%)
它会调用Sass::Script::Functions#hsl。

在手册的后面还有一些instructions on writing your own functions。但是，我不确定如何让 Sprockets 加载您的 Sass::Script::Functions 补丁，所以我不能称之为实用的解决方案；不过，Sprocket Fu 比我强的人可能能够使这种方法发挥作用，我认为这比 ERBified SCSS 更优雅。

【讨论】：

【解决方案5】：

您可以轻松使用数字 2，只需将 .erb 扩展名添加到您的 .scss 文件：

app/assets/stylesheets/todos.css.scss.erb

并使用asset_path 方法获取带有哈希的图像路径：

.button.checkable { background-image: url('<%= asset_path 'tick.png' %>'); }

此文件将由 erb 处理，然后由 sass 处理。

【讨论】：

在“SASS”中提出的问题不在“ERB”中。尽管如此，这是一个有用的提示。
部署到生产后，最佳答案对我不起作用。但是确实如此。

【解决方案6】：

使用资产管道时，必须重写资产路径，并且 sass-rails 为以下资产类别提供 -url 和 -path 帮助器（在 Sass 中为连字符，在 Ruby 中为下划线）：图像、字体、视频、音频、JavaScript 和样式表。

image-url("rails.png") 返回 url(/assets/rails.png) 图像路径（“rails.png”）返回“/assets/rails.png”

也可以使用更通用的形式：

asset-url("rails.png") 返回 url(/assets/rails.png) 资产路径（“rails.png”）返回“/assets/rails.png”

【讨论】：

不鼓励使用纯代码的答案。考虑添加一些有用的描述。
这实际上并没有回答所提出的问题。该解决方案完全忽略了资产管道，并提供了一个要求从public/ 加载图像的示例。 OP 正在明确寻找一种适用于资产管道的解决方案，而不是这种方法。