sass-rails资产管道:错误地生成图像路径; `url(/images/blah.png)`而不是`url(/assets/blah.png)`
在第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
为*.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
命令来了解要升级的Gems)
这是我们的haml-rails,指南针和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’,ref:’92c41db61f20a9f122de25bc73e5045cfccdbcd5′
gem’sass-rails’,’〜> 3.2.5′
不一定是解决方案,但肯定是一个可用的选项:如果你打开使用指南针spriting,你将减少http请求的数量,并能够使用精灵地图手动指定你的图像路径,即’$ sprites :sprite-map(“PATH / * .png”);’
完整性检查当前资产管道中的文件。 检查它是否在此处列出的目录之一:
<%= debug Rails.application.config.assets.paths %>
接下来检查指南针希望找到图像的相对路径(并查看它是否匹配。根据Compass配置文档 ,其中一个应告诉您:
<%= 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文件(添加了一个空格)并重新加载页面后,我得到了正确的结果。 删除空间后,它正常工作。