50

我有一个 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。这篇文章提出了两个建议：

  1. 不要将资产管道用于图像——而是将它们放入public/images/并直接引用它们
  2. 为你的 CSS 使用 ERB 并让 Rails 计算出图像 URL。

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

4

6 回答 6

97

以下应该可以解决问题：

.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、样式表

于 2011-07-24T10:55:59.247 回答
11

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

于 2011-07-09T04:30:09.747 回答
2

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

资产数据 url('路径')

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

于 2012-11-28T23:53:38.810 回答
1

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

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

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

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

我只用一个 Less 文件尝试过这个，但它也应该可以工作.css.scss.erb。

顺便说一句，您还可以将自己的函数添加到 SASS：

此模块中的方法可从 SassScript 上下文访问。例如，你可以写 

$color = hsl(120deg, 100%, 50%)

它会调用Sass::Script::Functions#hsl.

手册中甚至还有一些关于编写自己的函数的说明。但是，我不确定如何让 Sprockets 加载您的Sass::Script::Functions补丁，所以我不能称之为实用的解决方案；不过，Sprocket Fu 比我强的人可能能够使这种方法起作用，我认为这比 ERBified SCSS 更优雅。

于 2011-06-18T05:36:34.570 回答
1

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

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

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

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

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

于 2011-06-21T15:14:00.030 回答
0

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

image-url("rails.png") 返回 url(/assets/rails.png) image-path("rails.png") 返回"/assets/rails.png"

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

资产 url(“rails.png”) 返回 url(/assets/rails.png) 资产路径(“rails.png”) 返回“/assets/rails.png”

于 2016-06-25T20:55:15.237 回答