Heroku没有加载我的资产并返回sass错误

时间:2016-02-06 18:03:42

标签: css ruby-on-rails heroku

我不明白为什么heroku不会编译我的资产。下面是我的production.rb文件的内容

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

此处还有我的application.css文件的内容。我没有使用sass,我正在使用多个不同的css文件和bootstrap 3.3.5 css文件。

/*
 * 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
 */

1 个答案:

答案 0 :(得分:0)

此错误的典型原因是 您的CSS无效,或者您的提交未被Heroku正确处理。

解决此错误的最简单方法是在本地预编译,然后推送到平台:

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

这将允许您推送一组Heroku只需更新的资产(不是从头开始编译)。如果它不起作用,你应该发布buildpack的日志,这样我们才能看到发生了什么。

<强>预处理

通过查看您的代码,您需要做的最重要的更改是使用preprocessors(拨打image_url):

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

您需要将自己的所有.css更改为.scss,并将url(...)替换为image_url(...) - 这将在生产中引用正确的图像,即使使用资产指纹识别也是如此。

问题是url CSS是一个静态方法 - 它会调用&#34;绝对&#34;路径...

  
      
  • url(your-image.png)仅指assets/images/your-image.png
  •   
  • image_url(your-image.png)引用asset_path并仅调用正确的文件
  •   

因此,您的问题的答案是确保使用适当的asset_helpers引用您的资源 - 这意味着您 使用预处理器({{1 } / SCSS)。