Heroku is not loading my assets and returns sass error

Question

I don't understand why heroku won't compile my assets. Down below is the content of my production.rb file

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.assets.initialize_on_precompile = false

  # Enable Rack::Cache to put a simple HTTP cache in front of your application
  # Add `rack-cache` to your Gemfile before enabling this.
  # For large-scale production use, consider using a caching reverse proxy like
  # NGINX, varnish or squid.
  # config.action_dispatch.rack_cache = true

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  # config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
  config.serve_static_files = true
  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

  # Asset digests allow you to set far-future HTTP expiration dates on all assets,
  # yet still be able to expire them through the digest params.
  config.assets.digest = true

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # Use the lowest log level to ensure availability of diagnostic information
  # when problems arise.
  config.log_level = :debug

  # Prepend all log lines with the following tags.
  # config.log_tags = [ :subdomain, :uuid ]

  # Use a different logger for distributed setups.
  # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = 'http://assets.example.com'

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

      # Use default logging formatter so that PID and timestamp are not suppressed.
      config.log_formatter = ::Logger::Formatter.new

      # Do not dump schema after migrations.
      config.active_record.dump_schema_after_migration = false
    end

Also here is the content of my application.css file. I'am not using sass, I'am using multiple different css files and bootstrap 3.3.5 css file.

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require about
 *= require bootstrap
 *= require comment
 *= require forms
 *= require main
 *= require navigation
 *= require notices
 *= require post
 *= require_self
 */

Answer 1

Typical reason for this error is either that your CSS is invalid, or your commit is not being processed by Heroku correctly.

The simplest way to fix this error is to precompile locally and then push to the platform:

$ rake assets:clobber
$ rake assets:precompile RAILS_ENV=production
$ git add .
$ git commit -a -m "Assets"
$ git push heroku master

This will allow you to push a set of assets which Heroku will only have to update (not compile from scratch). If it doesn't work, you should post your logs of the buildpack so we can see what's going on.

---

Preprocessor

From looking at your code, the most important change you need to make is use of preprocessors (to call image_url ):

#app/stylesheets/about.scss
.img-circle:hover {
  background: image_url("founder-cartoon-pic.png");
}

You need to change all your own .css to .scss , and replace url(...) with image_url(...) - this will reference the correct image in production, even with asset fingerprinting.

The problem is that url for CSS is a static method - it calls an "absolute" path...

• url(your-image.png) refers exclusively to assets/images/your-image.png
• image_url(your-image.png) refers to the asset_path and calls only the correct file

Thus, the answer to your question is to make sure your assets are referenced with the appropriate asset_helpers -- meaning you'll have to use a preprocessor ( SCSS / SASS ).