在 Rails/Spree 商店中更改 CSS 中的按钮图像

Question

我正在创建一个 Spree 商店，并尝试让按钮使用图像而不是扩展程序（和引导程序）中包含的默认按钮。我可以在 CSS 中定位正确的按钮，并停用背景颜色、边框等。背景 url 不适用于图像（路径：“app/assets/images/heart-icon.png”），但它可以工作适用于任何外部图片网址。

我认为我的问题在于资产管道，但我无法确定设置为 url 的正确路径。

来自我的 .css 文件：

form.new_wished_product button.btn.btn-info {
  background: url(assets/heart-icon.png);
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent;
  border: none;
}

悬停或单击时按钮不需要更改 - 它只是一个简单的图像。

谢谢！

编辑：

我看到了相关的question，但我认为我的不同，因为我尝试了这些解决方案。我试图用纯 CSS 来做到这一点，并将文件扩展名更改为 .css.scss 对我有用。

Answer 1

您是否尝试过使用image-url() helper 而不是url()？

image-url('heart-icon.png');

这将在您网站的文件结构中找到资产。

使用资产管道时，必须重写资产路径，并且 sass-rails 为以下资产类别提供 -url 和 -path 助手（在 Sass 中为连字符，在 Ruby 中为下划线）：图像、字体、视频、音频、JavaScript 和样式表。