在 sass 中使用 image-url 来避免硬编码图像资产路径答案

【问题标题】：Using image-url within sass to avoid hard coding image assets path在 sass 中使用 image-url 来避免硬编码图像资产路径
【发布时间】：2013-04-04 19:45:57
【问题描述】：

我刚刚开始使用 Rails 资产管道，我是一名前端人员。我正在尝试在 sass 文件中使用 image-url 帮助程序，这样我就不必对路径进行硬编码。

以下SASS

.some-class
  background: image-url("image.png")

生成以下 CSS

.some-class{
  background: url("asset/image.png");
}

如何使用 image-url 帮助程序生成以下 css，而不对图像路径进行硬编码？

.some-class{
  background: url("asset/image.png") no-repeat 0 0 #fff;
}

【问题讨论】：

我在这里遗漏了什么吗？解决方案看起来很明显：background: image-url("image.png") no-repeat 0 0 #fff;
我也试过这个，但对我不起作用..出现某种错误..!!

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

【解决方案1】：

你可以使用，

.some-class
  background-image: image-url("image.png")
  background-repeat: no-repeat;
  background-color: #fff;

等等。

或

 background: #fff image-url("image.png") no-repeat 0 0;

应该可以。

【讨论】：

【解决方案2】：

您可能应该使用：

background-image: asset-url("image.png", image) no-repeat 0 0 #fff;

asset-url 是一个 sass/rails 功能，它可以让资产管道为您做一些（生产）工作。您可以阅读有关该功能的信息here。

使用 helper 比普通的 url("image.png") 更可取，因为它可以在生产中为您提供指纹 URL。见this StackOverflow answer。

【讨论】：

应该可以，excat 错误是什么？也许用image-url('image.png')替换asset-url("image.png", image)。
您可能想看看下面的 StackOverflow 问题：stackoverflow.com/questions/9304607/… 它提供了一些额外的指示（尤其是您的文件是否包含在资产预编译列表中？）