Heroku Not Showing SCSS Background Images

 

I have a Rails app that uses background images from a style.css.scss file. I have found multiple ways of having the images show up on localhost , but no ways to get them to display on Heroku.

I have looked at MANY posts on SO like this and this, as well as other sites like this, but nothing has worked so far.

Here is the code I have in my 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;
}

However, I have also tried background-image , image-url , asset-url , and numerous other permutations as found in the linked SO posts.

I have this in my production.rb file: 

  config.serve_static_files = true
  config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
  config.assets.compile = true
  config.assets.digest = true

And this in my application.html.erb file to call the css sheet: 

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

As suggested by other posts, I have added this to my application.rb: 

config.assets.initialize_on_precompile = false

Any ideas on how this can be resolved would be happily received!

ADDITIONAL INFO

Here's my 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'

Here are my console errors in localhost: 在这里输入图像描述

And in Heroku: 在这里输入图像描述

Look at your paths.. It must be something with your configuration. You've got your absolute path in code somewhere, either that or it's on track to something related. Search your code-base and make sure you don't have your own machine's absolute path hard-coded anywhere. Make sure it is all relative. /Users/elizabethbayardelle/Dropbox/Code/BIA/ should not be anywhere in your source, but somewhere it is being used in your herokuapp instance. On your localhost screenshot you've even got a path to heroku.com ... how? A second take over how you've configured things will fix this I'm sure.

I think the main problem in Heroku is, its unable to load the bootstrap.css. You have to solve this first.

for bootstrap support, add this two gem, 

gem 'therubyracer'
gem 'less-rails-bootstrap'

specify about this in application.js just after jquery_ujs reference. 

//= require twitter/bootstrap

application.css before require_tree . 

*= require twitter/bootstrap

And then remove the bootstrap href references from the <head> in your view file.

I think this will help you to understand more. http://rails-magic.blogspot.com/2016/05/how-to-integrate-custom-bootstrap-theme.html

If you want to use asset_path in your stylesheets, you'll need to convert them to ERB templates. Example: application.css.erb -- This makes the asset_path helper available within the template.

In most cases, however, the proper method to be used is image-url() . Just make sure that you use it in the correct manner: 

background-image: image-url("hero-000.jpg");          # < Correct
background-image: url(image-url("hero-000.jpg"));     # < Incorrect
链接地址: http://www.djcxy.com/p/13668.html

上一篇: 无法在Bash 4中启用globstar

下一篇: Heroku不显示SCSS背景图像