SAS-Rails 资产管线:错误地生成图像路径;'url(/images/blah.png)“而不是”url(/as



在 2.2.2 节 "CSS 和 Sass" 中,我被告知要把image-url('delete.png')放在我的 sass 中。所以我有。

但是,它正在生成类似 CSS

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

而不是我到处被告知它应该产生的东西,正确和明显的东西,

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

什么。哎呀。

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

下面是导致此行为的相关设置的要点。以下是我们代码库早期版本中相同文件的要点(就在我们实现资产管道之后,它实际上工作了大约一周,然后这种令人沮丧的行为才会弹出)。你能发现差异吗?您能想到的任何其他文件可能会导致这种情况吗?

注意

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

两次黑客变通尝试

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

1:将图像放入/图像中

我试图将所有图像移动到public/images并将其添加为加载路径。这在 dev 中有效(图像可以在 /assets/images 上访问),但是为生产而预编译将指纹图像仅放在 /assets 中 (obvs),所以当 sass-rails 放入url(/imagse/delete-120398471029384102364.png)时,它找不到。

2:使/public/images 成为/public/assets 的符号链接

这可能适用于生产环境,但在开发中不存在/assets 文件夹,因此 url(/images/delete.png) 指令会导致未找到的图像。

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

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

我希望这可以解决您的问题。如果没有,此方法为您生成的资产路径是什么?

似乎是由于你的sass-rails版本(3.1.0)。我可以重现您的问题(感谢您发布 Gemfile),并且在撞到sass-rails 3.1.4 时它会消失。

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

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

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

也许将所有内容(包括 Rails)升级到最新版本,这仍然是最好的方法(使用 bundler 1.2 中的bundle outdated命令来了解要升级的 Gem)

这是我们的 haml-rails、指南针和 sass-rail 的组合。 不过,我们正在运行轨道 3.2.6。这对我们来说效果很好。

宝石 '指南针', git: 'git://github.com/chriseppstein/compass.git', 参考: '3a4c5c75dca9f07f6edf2f0898a4626269e0ed62'

gem 'haml-rails', git: 'git://github.com/indirect/haml-rails.git', ref: '92C41db61f20a9f122de25bc73e5045cfccdbcd5'

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

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

健全性 检查当前资产管道中的文件。检查它是否位于此处列出的目录之一中:

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

接下来检查指南针期望找到图像的相对路径(并查看它是否垫合。根据指南针配置文档,其中一个应该告诉你:

<%= 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(比硬编码脆弱得多)应该有望工作。 我基于我在样式表上看到的类似技术,

对我来说

image_path更改为image-path.scss起作用。后来,我再次更改为image_path,现在工作正常。

删除缓存对我没有帮助。

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

最新更新