css - RAILS4生产环境中 Assets 预编译后背景图像不起作用

Question

我的 application.css.scss 文件中有以下 mixin :

@mixin inputwithicon($iconname) {
  padding: 4px 4px 4px 20px;
  border:1px solid #ccc;
  text-indent: 0.30em;
  font-size:15px;
  font-weight:100;
  background: #FFFFFF url(assets/input/#{$iconname}.png) no-repeat;
  background-position: 2% center;
}

此 mixin 在开发中运行良好，但在预编译 Assets 并在生产中运行后，它停止工作(未设置背景)。

我尝试使用 image-url 而不是 url，但没有成功。

Answer 1

background: #FFFFFF asset-url("assets/input/#{$iconname}.png") no-repeat;

--

在 SASS 中，您可以使用 asset-url； SCSS asset_url。

无论哪种方式，您都需要使用上面的帮助器，以便当您的 Assets 为fingerprinted时通过precompilation ，预处理器引用的正确文件。

您遇到的问题是 url 仅调用静态文件名。虽然它本身不是问题，但当您部署应用程序并发生预编译时，您需要确保 CSS 引用正确的文件名，因此需要帮助程序。