css - Heroku is not loading my assets and returns sass error -

i don't understand why heroku won't compile assets. down below content of production.rb file

rails.application.configure   # settings specified here take precedence on in config/application.rb.    # code not reloaded between requests.   config.cache_classes = true    # eager load code on boot. eager loads of rails ,   # application in memory, allowing both threaded web servers   # , relying on copy on write perform better.   # rake tasks automatically ignore option performance.   config.eager_load = true    # full error reports disabled , caching turned on.   config.consider_all_requests_local       = false   config.action_controller.perform_caching = true   config.assets.initialize_on_precompile = false    # enable rack::cache put simple http cache in front of application   # add `rack-cache` gemfile before enabling this.   # large-scale production use, consider using caching reverse proxy   # nginx, varnish or squid.   # config.action_dispatch.rack_cache = true    # disable serving static files `/public` folder default since   # apache or nginx handles this.   # config.serve_static_files = env['rails_serve_static_files'].present?   config.serve_static_files = true   # compress javascripts , css.   config.assets.js_compressor = :uglifier   # config.assets.css_compressor = :sass    # not fallback assets pipeline if precompiled asset missed.   config.assets.compile = true    # asset digests allow set far-future http expiration dates on assets,   # yet still able expire them through digest params.   config.assets.digest = true    # `config.assets.precompile` , `config.assets.version` have moved config/initializers/assets.rb    # specifies header server uses sending files.   # config.action_dispatch.x_sendfile_header = 'x-sendfile' # apache   # config.action_dispatch.x_sendfile_header = 'x-accel-redirect' # nginx    # force access app on ssl, use strict-transport-security, , use secure cookies.   # config.force_ssl = true    # use lowest log level ensure availability of diagnostic information   # when problems arise.   config.log_level = :debug    # prepend log lines following tags.   # config.log_tags = [ :subdomain, :uuid ]    # use different logger distributed setups.   # config.logger = activesupport::taggedlogging.new(sysloglogger.new)    # use different cache store in production.   # config.cache_store = :mem_cache_store    # enable serving of images, stylesheets, , javascripts asset server.   # config.action_controller.asset_host = 'http://assets.example.com'    # ignore bad email addresses , not raise email delivery errors.   # set true , configure email server immediate delivery raise delivery errors.   # config.action_mailer.raise_delivery_errors = false    # enable locale fallbacks i18n (makes lookups locale fall   # i18n.default_locale when translation cannot found).   config.i18n.fallbacks = true    # send deprecation notices registered listeners.   config.active_support.deprecation = :notify        # use default logging formatter pid , timestamp not suppressed.       config.log_formatter = ::logger::formatter.new        # not dump schema after migrations.       config.active_record.dump_schema_after_migration = false     end 

also here content of application.css file. i'am not using sass, i'am using multiple different css files , bootstrap 3.3.5 css file.

/*  * manifest file that'll compiled application.css, include files  * listed below.  *  * css , scss file within directory, lib/assets/stylesheets, vendor/assets/stylesheets,  * or plugin's vendor/assets/stylesheets directory can referenced here using relative path.  *  * you're free add application-wide styles file , they'll appear @ bottom of  * compiled file styles add here take precedence on styles defined in styles  * defined in other css/scss files in directory. better create new  * file per style scope.  *  *= require_tree .  *= require  *= require bootstrap  *= require comment  *= require forms  *= require main  *= require navigation  *= require notices  *= require post  *= require_self  */ 

typical reason error either css invalid, or commit not being processed heroku correctly.

the simplest way fix error precompile locally , push platform:

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

this allow push set of assets heroku have update (not compile scratch). if doesn't work, should post logs of buildpack can see what's going on.

---

preprocessor

from looking @ code, important change need make use of preprocessors (to call image_url):

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

you need change own .css .scss, , replace url(...) image_url(...) - reference correct image in production, asset fingerprinting.

the problem url css static method - calls "absolute" path...

• url(your-image.png) refers exclusively assets/images/your-image.png
• image_url(your-image.png) refers asset_path , calls correct file

thus, answer question make sure assets referenced appropriate asset_helpers -- meaning you'll have use preprocessor (scss / sass).