SCSS 文件中的 Rails 3.1 资产 url 似乎没有正确引用资产答案

【问题标题】：Rails 3.1 asset urls in SCSS files do not seem to be referencing the assets correctlySCSS 文件中的 Rails 3.1 资产 url 似乎没有正确引用资产
【发布时间】：2014-10-27 15:20:52
【问题描述】：

我刚刚从 Rails 3.0 升级到 Rails 3.1。

我有一个引用图像 (/app/assets/images/foo.png) 的 foo.css.scss 文件，如下所示：

.foo {
  background-image: image-url('foo.png');
}

问题是我的foo.png 文件未加载，我在日志中看到 404 错误。实际生成的css条目是：

background-image: url(/images/foo.png);

这是错误的 (?)，因为图片可以在 /assets/foo.png 而不是 /images/foo.png 找到。

请注意，我仍在使用development 模式。

另一个重要说明。如果我将我的 foo.css.scss 文件重命名为 foo.css.erb 并使用：

background-image: url(<%= image_path('foo.png') %>);

它工作正常，因为它生成/assets/foo.png。

那么，问题是为什么我的scss 预编译器没有生成正确的css？

更新：我的foo.css.scss 文件位于：

app/assets/stylesheets/sub_dir/foo.css.scss

这有什么不同吗？

【问题讨论】：

出现了更严重的问题，但一个简单的解决方法是将 image-url 更改为 assets-url
@Yule 我按照你的建议使用了asset-url('foo.png', image)，但我有同样的错误。生成的网址是/images/foo.png
你使用的是什么版本的 sass-rails？你有config.assets.enabled = trueconfig.assets.version = '1.0'在application.rb中吗
@Yule sass-rails version: 3.1.0 .. 'yes' 对于版本和启用标志
如果找不到 foo.png，你应该只获取 /images/foo.png。会不会是一些愚蠢的事情，比如你的 css 和文件路径之间的大写/小写不匹配？

标签： ruby-on-rails ruby-on-rails-3.1 sass asset-pipeline

【解决方案1】：

你可以试试：

.foo {
  background: url("/assets/foo.png")
}

应该可以正常工作。希望对你有帮助:)

【讨论】：

嗯。这个确实有效。当我转向生产时，这会起作用吗？此外，根据 sass-rails 的文档， image-url 方法应该自动执行此操作。问题是为什么 image-url 方法不能按预期工作。我在回答中写道image-url 不起作用。
是的，当然。它将被编译并为同一图像生成一个指纹文件。您可以在“公共”目录中找到它
暂时将保留您的答案有用，但您必须删除image-url 版本，因为正如我在我的问题中所说的那样不起作用。不过，我需要了解为什么 image-url 在使用带有 /assets/ 前缀的 url 之前不起作用。
此链接可能对您有所帮助-stackoverflow.com/questions/16843143/…
这是不正确的，因为它会在生产中中断。我认为它确实适用于 Rails 3.1，但肯定会与 Rails 4.0 中断

【解决方案2】：

试试

.classname{
  background: url(asset_path('/assets/image.png'))
}

【讨论】：

你需要更正你的答案url(asset_path('/assets/foo.ng', image));

【解决方案3】：

我尝试了各种解决方案。最优雅的是：

.foo {
   background-image: url('foo.png')
}

由 SCSS 编译器自动转换为url('/assets/foo.png')。

【讨论】：

【解决方案4】：

.foo {
  background-image: asset-url('sub_dir/foo.png', asset);
}

【讨论】：