Heroku不显示SCSS背景图像
我有一个使用来自style.css.scss
文件的背景图像的Rails应用程序。 我发现有多种方法让图像在localhost
上显示,但没有办法让它们在Heroku上显示。
我已经看过很多关于这个和这个以及其他这样的网站的帖子,但是到目前为止没有任何工作。
这是我在style.css.scss
的代码:
.hero-000 {
width: 102%;
background: url(asset-path("hero-000.jpg")) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
不过,我也尝试了在链接的SO帖子中找到的background-image
, image-url
, asset-url
和许多其他排列。
我在我的production.rb
文件中有这个:
config.serve_static_files = true
config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
config.assets.compile = true
config.assets.digest = true
并在我的application.html.erb
文件中调用css工作表:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
正如其他职位所建议的,我已经将此添加到我的application.rb中:
config.assets.initialize_on_precompile = false
任何关于如何解决这个问题的想法都会被高兴地接受!
附加信息
这是我的gemfile:
source 'https://rubygems.org'
gem 'rails', '4.2.5'
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :development do
gem 'sqlite3'
gem 'binding_of_caller'
gem 'better_errors'
end
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'friendly_id', '~> 5.1.0'
gem 'google-analytics-rails', '1.1.0'
gem 'paperclip'
gem 'meta-tags'
gem 'bootsy'
gem 'devise'
这里是我在本地主机上的控制台错误:
在Heroku中:
看看你的路径..它必须是你的配置。 你已经在代码的某个地方获得了绝对路径,无论是它还是正在跟踪相关的东西。 搜索你的代码库,并确保你没有自己的机器的绝对路径在任何地方硬编码。 确保它是相对的。 /Users/elizabethbayardelle/Dropbox/Code/BIA/
不应该在你的源代码中的任何地方,但它在你的herokuapp实例中被使用的地方。 在你的localhost截图中,你甚至可以通往heroku.com
的路径......怎么样? 第二个接管如何配置的东西将会解决这个问题,我相信。
我认为Heroku的主要问题是,它无法加载bootstrap.css。 你必须先解决这个问题。
为了引导支持,添加这两个宝石,
gem 'therubyracer'
gem 'less-rails-bootstrap'
在jquery_ujs引用之后的application.js中指定这一点。
//= require twitter/bootstrap
require_tree之前的application.css。
*= require twitter/bootstrap
然后从视图文件中的<head>
中删除引导程序href
引用。
我想这会帮助你更多地理解。 http://rails-magic.blogspot.com/2016/05/how-to-integrate-custom-bootstrap-theme.html
如果您想在样式表中使用asset_path
,则需要将它们转换为ERB模板。 例如: application.css.erb
- 这使得asset_path
helper在模板中可用。
然而,在大多数情况下,要使用的正确方法是image-url()
。 只要确保你以正确的方式使用它:
background-image: image-url("hero-000.jpg"); # < Correct
background-image: url(image-url("hero-000.jpg")); # < Incorrect
链接地址: http://www.djcxy.com/p/13667.html