Rails 4 + Sass - 生产中没有背景图片
Posted
技术标签:
【中文标题】Rails 4 + Sass - 生产中没有背景图片【英文标题】：Rails 4 + Sass - No background image in production 【发布时间】：2015-05-25 03:41:13 【问题描述】：我知道关于这个问题有很多类似的问题/答案，我已经尝试了至少 7 种建议的方法。我可以通过多种方式在本地显示我的应用程序的背景图像。尝试了近 40 小时后，似乎没有办法在生产中渲染它。它运行在以下位置：
Ruby 2.1.5 Rails 4.1.8 Puma 2.1 通过 Amazon Elastic Beanstalk（单实例 - 无负载均衡器）我已经尝试了 config.serve_static_assets=[true|false] 并将 RAILS_SKIP_ASSET_COMPILATION 设置为 true 和 false 的所有组合。
运行 rake assets:precompile RAILS_ENV=production
尝试了我能想到的所有路径，但没有找到背景图片。我注意到的一件事是，当图像复制到 public/assets 目录时，预编译会更改图像的名称。 （示例：“foo.jpg”变为“foo-ilfajwe8hjsa8erfjsdf.jpg”）所以我尝试将原始图像文件复制到新的 public/assets 目录，希望应用程序能在那里找到它们。那没用。
我想这可能是我在我的 css 中引用它的方式，因为奇怪的是，favicon 文件的显示方式与我应用程序的“字体”文件夹中的字体一样。并且两者都像背景图片一样附加了他们的名字。
这是我的 application.html.erb..
<!DOCTYPE html>
<html>
<head>
<title>Capstone v1.4.5</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag 'capstone_icon.png' %>
</head>
<body>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= render 'navigation' %>
<main>
<%= yield %>
</main>
</body>
</html>
这里是 application.css.sass..
/*
*= require bootstrap.min
*/
@import "bootstrap-sprockets"
@import "bootstrap"
@font-face
font-family: 'Cinzel-Regular'
src: font-url('Cinzel-Regular.ttf')
@font-face
font-family: 'Oxygen'
src: font-url('Oxygen.otf')
html
position: relative
min-height: 100%
body
background-image: image-url("snowy_prairie_bg.jpg")
background-repeat: no-repeat
background-position: center top
font-family: 'Oxygen'
margin: 0 0 95px
我的 public 目录的内容（预编译后）
application-6cca23f2f72df0ad7d26279535719396.css
application-6cca23f2f72df0ad7d26279535719396.css.gz
application-fddd9c84ba451526dbd2ef5bf46e494c.js
application-fddd9c84ba451526dbd2ef5bf46e494c.js.gz
bootstrap
capstone_icon-ed6ffe0ae4bbbb56a8b74a4d7ff230cf.png
capstone_icon.png
Cinzel-Regular-59dcda430d3afc3ace221f1835d7fb08.ttf
images
manifest-73d04c0fd1290b15fb280becfcf62b7b.json
Oxygen-1c736bd9242de63cf87c07f0a48c9b5c.otf
Oxygen-Bold-01bc72645c864aa090d57754565ef634.otf
Oxygen-BoldItalic-cfe32a5aedef7b25f8b1efdfcbdbd72a.otf
Oxygen-Italic-2a51c29c8f2bd242ac27e6fb7860f6a1.otf
snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg
snowy_prairie_bg.jpg
我是否在我的 CSS 中引用了错误的图像？同样，它在本地渲染得很好。我应该使用乘客而不是彪马吗？这不是一个非常小的应用程序，我在数据库上投入了大量资金，该数据库也托管在亚马逊上。但就像我说的，我接近 40 小时只是试图渲染这个背景。
如果您有任何想法，请提供帮助。我愿意尝试任何事情！
谢谢
仅供参考 - 上述引导程序、字体、其他图像和 sass 样式完美呈现。这只是背景图像。谢谢
编辑：当我转到页面capstonesavings.com 时，开发人员中显示以下错误。控制台：加载资源失败：服务器响应状态为 403（禁止访问）。我需要更改某些内容的权限吗？
【问题讨论】：
【参考方案1】：好的，所以我想我修好了！
上面的大部分代码都是正确的，但是我从上面的application.css.sass改了下面的..
改变了
background-image: image-url("snowy_prairie_bg.jpg")
到
background-image: asset-url("snowy_prairie_bg.jpg")
然后，我通过 SSH 连接到实例 (eb ssh) 并执行以下操作：
cd /var/app/current
紧随其后
sudo chmod 755 public/assets/snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg
我之前尝试过对 SaSS 进行上述更改，但如果不更改权限，它就无法正常工作。感谢 Chrome 开发者工具，当页面被渲染时，我注意到一个（微小的）错误标志。我单击它，它显示了我在上述编辑中添加的 403 错误。这是亚马逊用来确保安全的一些东西，因为我猜你可以将你的日志文件等路由到相关的 S3 存储桶。所以这就是为什么我在更改烫发时明确针对有问题的图像。这个网站不会有大量图片，但如果有的话，我可能会花时间详细说明存储桶中的存储空间并相应地设置更广泛的权限。
这为我节省了一天。希望对其他人有所帮助。
【讨论】：
以上是关于Rails 4 + Sass - 生产中没有背景图片的主要内容，如果未能解决你的问题，请参考以下文章
预编译时的 Rails 生产 bootstrap-sass 错误
Rails 4 - 在生产服务器上预编译资产后没有 manifest.json