sass-rails 资产管道：生成图像路径不正确； `url(/images/blah.png)` 而不是 `url(/assets/blah.png)`

Posted 2023-03-07

【中文标题】sass-rails 资产管道：生成图像路径不正确； `url(/images/blah.png)` 而不是 `url(/assets/blah.png)`

【英文标题】：sass-rails asset pipeline: generating image paths incorrectly; `url(/images/blah.png)` instead of `url(/assets/blah.png)`

【发布时间】：2012-06-17 21:57:54

【问题描述】：

在section 2.2.2, "CSS and Sass" 中，有人告诉我将image-url('delete.png') 放入我的sass 中。所以我有。

但是，它生成的 CSS 像

background-image: url(/images/delete.png)

而不是我在任何地方都被告知它应该生成的东西，正确和明显的东西，

background-image: url(/assets/delete.png)

什么。见鬼。

我花了几天的时间试图弄清楚这是从哪里来的。

这是导致此行为的a gist of relevant settings。这是a gist of the same files in an earlier version of our code base（就在我们实施资产管道之后，它实际上工作了大约一周，然后才出现这种令人沮丧的行为）。你能发现差异吗？您能想到的任何其他文件可能会导致此问题吗？

注意

我们故意使用旧版本的 sass-rails，因为新版本在预编译时会导致 Stack level too deep! 错误。 我们正在使用 Compass。

---

解决方法的两次骇人听闻的尝试

因为实际上对资产管道进行故障排除有点糟糕。

1：将图片放入/images

我试图将所有图像移动到public/images 并将其添加为加载路径。这在开发中有效（图像可在/assets 或/images 访问），但生产的预编译将指纹图像仅放入/assets（obvs），因此当sass-rails 放入url(/imagse/delete-120398471029384102364.png) 时，它可以'找不到。

2：将 /public/images 设为 /public/assets 的符号链接

这可能会在生产中工作，但在开发中 /assets 文件夹不存在，因此 url(/images/delete.png) 指令会导致找不到图像。

【问题讨论】：

您是否尝试过以下方法：asset_path 'delete.png'？

应该是asset-url('delete.png', image)。是的，我试过了。正如人们所希望的那样，image-url('delete.png') 只是它的简写。它们具有完全相同的行为。

使用 .sass.erb 文件并使用 怎么样？虽然它仍然是解决方法，但可能值得尝试诊断 sass-rails 是否有故障。

【参考方案1】：

看起来确实像这个问题：https://github.com/rails/sass-rails/issues/57 如果是这样，您应该尝试在 Compass 和 Sass-rails 之间找到良好的版本组合。

也许将所有东西（包括 Rails）升级到最新版本，这仍然是最好的方法（在 bundler 1.2 中使用 bundle outdated 命令来了解要升级的 Gems）

【讨论】：

"尝试找到 Compass 和 Sass-rails 之间版本的良好组合"。惊人的。我喜欢这样的解决方案。 “放入两个随机版本，bundle update、rake tmp:cache:clear，然后换档刷新浏览器。”这就是我在询问 SO 之前所做的事情。糟透了。

感谢您提供该错误的链接。不过，看起来它仍然困扰着很多人（Close 后的很多 cmets 说它仍在发生）。

【参考方案2】：

这是我们的 haml-rails、compass 和 sass-rails 的组合。不过，我们正在运行 rails 3.2.6。 这对我们来说效果很好。

gem '指南针'，git：'git://github.com/chriseppstein/compass.git'，参考：'3a4c5c75dca9f07f6edf2f0898a4626269e0ed62'

gem 'haml-rails'，git：'git://github.com/indirect/haml-rails.git'，参考：'92c41db61f20a9f122de25bc73e5045cfccdbcd5'

gem 'sass-rails', '~> 3.2.5'

【参考方案3】：

如果您还没有这个，请将您的 css 文件命名为 *.css.scss（而不是 .sass - 如果您这样做，您可能需要调整某些语句的语法）。然后使用image_path 助手而不是image-path，例如：

background-image:url(image_path('delete.png'));

我希望这能解决您的问题。如果没有，这种方法为您生成的资产路径是什么？

【讨论】：

这不起作用（除非我没有采取适当的步骤，这是有可能的；我进行更改然后rake tmp:cache:clear && rm -r .sass-cache/* 然后 cmd+shift-R 在 Chrome 中的页面等等的资产返回状态为 200 而不是 202 未修改——这应该有效吗？）。它给出了与我之前相同的结果（返回“/images”而不是“/assets”）。不过，我什至没有在任何文档中看到这种语法。为什么不image-url？

【参考方案4】：

这似乎是由于您的 sass-rails (3.1.0) 版本所致。我可以重现您的问题（感谢您发布 Gemfile），并且在遇到 sass-rails 3.1.4 时它会消失。

尝试升级到 3.1.4 并清除 tmp/cache。还要确保您没有访问任何浏览器缓存。

我知道你说 3.1.4 导致了其他问题...你尝试过更高版本吗？

【讨论】：

这在我第一次尝试时就奏效了，因此我的支持让你获得了我原来的一半赏金。然而，我似乎做了其他事情，因为回到原来的 3.1.0 版本仍然可以工作。我今天（几周后）重试了，sass-rails 3.1.4 不再有效。将 Rails 和 sass-rails 升级到 3.1.6 也失败了。我可能会尝试升级到 3.2，但工作量很大。

你是否在测试之间清除缓存（特别是浏览器和 RAILS_ROOT/tmp/cache）？

每次代码更改后，我会rake tmp:cache:clear && rm -r .sass-cache/*，然后在 Chrome 中使用 cmd+shift-R（不依赖缓存）。

我更新到 sass-rails 3.1.4 并被 tmp/cache 和 .sass-cache 清除。 image-path 和 url-path 都错误地链接到 /images 而不是 /assets。我在我的开发环境中测试了 assets:precompile，尽管仍然加载单独的文件（未压缩），但路径更改为正确的 /assets。然后我推到登台，一切都很好。然后在开发中运行rake assets:clean 以返回到适当的开发环境后，生成的 css 仍然链接到 /assets。我不知道为什么会这样。

【参考方案5】：

不一定是一个解决方案，但肯定是一个可用的选项：如果您愿意使用指南针精灵，您将减少 http 请求的数量并能够使用精灵图手动指定您的图像路径，即'$sprites: sprite-map("PATH/*.png");'

【讨论】：

有趣的想法；不过，Compass 似乎仍会（通过 sass）为此创建一个“/images”指令，而不是正确的“/assets”。

啊，你是对的。我忘记在我的描述中的资产文件中包含必要的相对路径标志。 c.relative_assets = true

【参考方案6】：

完整性检查您当前资产管道中的文件。检查它是否在此处列出的目录之一中：

<%= debug Rails.application.config.assets.paths %>

接下来检查 compass 期望找到图像的相对路径（并查看它是否匹配。根据Compass config docs，其中一个应该会告诉您：

<%= debug config.compass.http_images_path %>
<%= debug config.compass.http_generated_images_path %>

我猜这是第一个。无论哪种方式，将它们的路径与您的图片的asset_path进行比较：

<%= debug asset_path 'delete.png' %>

如果路径不匹配，也许您需要将环境配置（development.rb，...）中的路径调整为例如：

config.compass.http_images_path = '/assets.

或者，您可以将图像移动到 http_images_path 或 http_generated_images_path 期望找到它的位置。

此时，asset_path/asset_url（比硬编码要脆弱得多）应该可以正常工作。我基于我在样式表中看到的similar technique，

【讨论】：

谢谢！不过，这一切看起来都不错。 asset_path 和 image_path 助手在 erb/haml 中工作。 sass 中的 (asset|image)-(path|url) 助手不起作用。

【参考方案7】：

对我来说，

将image_path 更改为image-path 适用于.scss。后来我又改成image_path，现在可以正常使用了。

删除缓存对我没有帮助。

【参考方案8】：

在我编辑了我的 .scss 文件（添加了一个空格）并重新加载页面后，我得到了正确的结果。删除空间后，它可以正常工作。