Question

我有一张背景图片：

app/assets/images/bg.jpg

使用样式表进行开发时可以正常：

body {
 background: #111 url('bg.jpg') repeat-x; 
  color: #DDD;
  font: normal 90% "Trebuchet MS",Verdana,sans-serif;
  margin-left: 1.2em;
}

但是在生产中它没有显示，日志显示：

ActionController::RoutingError (No route matches [GET] "/assets/bg.jpg"):

当我使用html和js模板时，我可以添加.erb来添加rails预处理，这将允许我使用路径和助手之类的东西，例如images_url

我怎么能：

a）用我的样式表做类似的事情

b）使用适用于dev和prod的路径。我尝试了[nothing]和images/但他们没有工作。

Answer 1

在较新版本的rails中，当你有.css.scss样式表时，你可以使用几个助手来帮助你实现这一点（你根本不必使用.erb），如图像 - path和image-url（请在这里查看帮助部分https://github.com/rails/sass-rails）

基本上你需要做的就是替换

background: #111 url('bg.jpg') repeat-x;

这个

background: #111 image-url('bg.jpg') repeat-x;

就是这样。（如果你还没有加上scss扩展名）

Answer 2

<强>预编译

您希望使用asset_path_helpers，特别是asset_url使用其中一个Rails资产preprocessors（SCSS / SASS）

你在制作中遇到的问题是Rails会附加所谓的＆＃34; fingerprint＆＃34;对资产。此指纹用于定义预编译文件的唯一性：

指纹识别是一种使文件名依赖的技术关于文件的内容。当文件内容改变时，文件名也被更改。对于静态或不经常的内容改变了，这提供了一个简单的方法来判断是否有两个版本文件是相同的，即使在不同的服务器或部署日期也是如此。

这意味着当你推动生产（并且通过预先编译）资产时，你最终会得到＆＃34; bg.png＆＃34;在与您在标准文件中引用的位置完全不同的位置。

-

<强>助手

诀窍是在预处理器中使用动态路径助手：

#app/assets/stylesheets/application.css.scss
body {
 background: #111 asset-url('bg.jpg') repeat-x; 
  color: #DDD;
  font: normal 90% "Trebuchet MS",Verdana,sans-serif;
  margin-left: 1.2em;
}

此应该为你工作

Answer 3

对我有用的修复是

 background: #111 url('<%= image_path "bg.jpg" %>') repeat-x;

并将我的文件.erb命名为default.scss.css.erb

其他方法不起作用。

如何从样式表中引用rails资产？

3 个答案: