【问题标题】:CSS styling is broken when deploying my rails app to heroku将我的 Rails 应用程序部署到 Heroku 时,CSS 样式被破坏
【发布时间】:2015-05-10 11:52:30
【问题描述】:

我有一个现有的 heroku rails 4 应用程序 (https://applicantlabs.herokuapp.com/),在本地运行时看起来是正确的,但是当我在 heroku 上运行它时,样式被破坏了。

我的 gemfile 看起来像这样

source 'https://rubygems.org'
ruby "2.2.1"
gem 'rails', '4.2.1'
gem 'pg'
gem 'uglifier', '>= 1.3.0'
gem 'jquery-rails'
gem 'devise'
gem 'devise-bootstrap-views'
gem "twitter-bootstrap-rails"
gem 'rails_12factor', group: :production # for heroku
gem 'puma'
gem 'sucker_punch'

我尝试通过将其添加到 config/environments/production.rb 文件然后部署来解决问题

config.assets.compile = true

我也试过

bundle exec rake assets:precompile

然后提交并推送。

没有任何效果。

css文件添加到app/assets/stylesheets

然后在app/assets/stylesheets/application.css我有

/*
 *= require animate.min
 *= require bootstrap_and_overrides
 *= require font-awesome
 *= require_self
 */
body{padding:0;margin:0;font-family:'Open Sans','Trebuchet MS',arial,sans-serif;font-size:13px}

当我查看页面的源代码并单击 css 文件时,它充满了奇怪的文本。这是其中的一小部分:

book����mark����8���8���ìS���

当我推送到 heroku 时,输出是:

~/Source/applicantlabs> git push heroku master
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 483 bytes | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Ruby app detected
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-2.2.1
remote: -----> Installing dependencies using 1.7.12
remote:        Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
remote:        Using rake 10.4.2
remote:        Using minitest 5.6.1
remote:        Using thread_safe 0.3.5
remote:        Using builder 3.2.2
remote:        Using erubis 2.7.0
remote:        Using mini_portile 0.6.2
remote:        Using rack 1.6.0
remote:        Using mime-types 2.5
remote:        Using arel 6.0.0
remote:        Using bcrypt 3.1.10
remote:        Using hitimes 1.2.2
remote:        Using json 1.8.2
remote:        Using orm_adapter 0.5.0
remote:        Using thor 0.19.1
remote:        Using devise-bootstrap-views 0.0.4
remote:        Using execjs 2.5.2
remote:        Using pg 0.18.1
remote:        Using bundler 1.7.12
remote:        Using rails_serve_static_assets 0.0.4
remote:        Using rails_stdout_logging 0.0.3
remote:        Using nokogiri 1.6.6.2
remote:        Using rack-test 0.6.3
remote:        Using warden 1.2.3
remote:        Using puma 2.11.2
remote:        Using sprockets 3.0.3
remote:        Using tzinfo 1.2.2
remote:        Using mail 2.6.3
remote:        Using uglifier 2.7.1
remote:        Using rails_12factor 0.0.3
remote:        Using loofah 2.0.1
remote:        Using i18n 0.7.0
remote:        Using rails-html-sanitizer 1.0.2
remote:        Using timers 4.0.1
remote:        Using celluloid 0.16.0
remote:        Using sucker_punch 1.4.0
remote:        Using activesupport 4.2.1
remote:        Using rails-deprecated_sanitizer 1.0.3
remote:        Using activemodel 4.2.1
remote:        Using rails-dom-testing 1.0.6
remote:        Using activerecord 4.2.1
remote:        Using actionview 4.2.1
remote:        Using globalid 0.3.5
remote:        Using actionpack 4.2.1
remote:        Using activejob 4.2.1
remote:        Using sprockets-rails 2.2.4
remote:        Using railties 4.2.1
remote:        Using jquery-rails 4.0.3
remote:        Using responders 2.1.0
remote:        Using actionmailer 4.2.1
remote:        Using rails 4.2.1
remote:        Using devise 3.4.1
remote:        Using twitter-bootstrap-rails 3.2.0
remote:        Your bundle is complete!
remote:        Gems in the groups development and test were not installed.
remote:        It was installed into ./vendor/bundle
remote:        Bundle completed (0.76s)
remote:        Cleaning up the bundler cache.
remote:        Detected manifest file, assuming assets were compiled locally
remote: 
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:        Default types for Ruby  -> console, rake, worker
remote: 
remote: -----> Compressing... done, 67.4MB
remote: -----> Launching... done, v38
remote:        https://applicantlabs.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/applicantlabs.git
   697fef0..4cc4ec5  master -> master

如果我跑

bundle exec rake assets:precompile RAILS_ENV=production

输出是

bundle exec rake assets:precompile RAILS_ENV=production --trace
** Invoke assets:precompile (first_time)
** Invoke assets:environment (first_time)
** Execute assets:environment
** Invoke environment (first_time)
** Execute environment
rake aborted!
ActiveRecord::AdapterNotSpecified: database configuration does not specify adapter
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activerecord-4.2.1/lib/active_record/connection_adapters/connection_specification.rb:171:in `spec'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activerecord-4.2.1/lib/active_record/connection_handling.rb:50:in `establish_connection'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activerecord-4.2.1/lib/active_record/railtie.rb:120:in `block (2 levels) in <class:Railtie>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/lazy_load_hooks.rb:38:in `instance_eval'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/lazy_load_hooks.rb:38:in `execute_hook'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/lazy_load_hooks.rb:45:in `block in run_load_hooks'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/lazy_load_hooks.rb:44:in `each'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/lazy_load_hooks.rb:44:in `run_load_hooks'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activerecord-4.2.1/lib/active_record/base.rb:316:in `<module:ActiveRecord>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activerecord-4.2.1/lib/active_record/base.rb:26:in `<top (required)>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1/gems/devise-3.4.1/lib/devise/orm/active_record.rb:3:in `<top (required)>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:274:in `require'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:274:in `block in require'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:240:in `load_dependency'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:274:in `require'
/Users/grantspilsbury/Source/applicantlabs/config/initializers/devise.rb:22:in `block in <top (required)>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1/gems/devise-3.4.1/lib/devise.rb:293:in `setup'
/Users/grantspilsbury/Source/applicantlabs/config/initializers/devise.rb:3:in `<top (required)>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:268:in `load'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:268:in `block in load'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:240:in `load_dependency'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:268:in `load'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/engine.rb:652:in `block in load_config_initializer'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/notifications.rb:166:in `instrument'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/engine.rb:651:in `load_config_initializer'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/engine.rb:616:in `block (2 levels) in <class:Engine>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/engine.rb:615:in `each'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/engine.rb:615:in `block in <class:Engine>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/initializable.rb:30:in `instance_exec'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/initializable.rb:30:in `run'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/initializable.rb:55:in `block in run_initializers'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:226:in `block in tsort_each'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:348:in `block (2 levels) in each_strongly_connected_component'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:420:in `block (2 levels) in each_strongly_connected_component_from'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:429:in `each_strongly_connected_component_from'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:419:in `block in each_strongly_connected_component_from'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/initializable.rb:44:in `each'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/initializable.rb:44:in `tsort_each_child'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:413:in `call'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:413:in `each_strongly_connected_component_from'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:347:in `block in each_strongly_connected_component'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:345:in `each'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:345:in `call'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:345:in `each_strongly_connected_component'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:224:in `tsort_each'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/tsort.rb:203:in `tsort_each'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/initializable.rb:54:in `run_initializers'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/application.rb:352:in `initialize!'
/Users/grantspilsbury/Source/applicantlabs/config/environment.rb:5:in `<top (required)>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:274:in `require'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:274:in `block in require'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:240:in `load_dependency'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/activesupport-4.2.1/lib/active_support/dependencies.rb:274:in `require'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/application.rb:328:in `require_environment!'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/railties-4.2.1/lib/rails/application.rb:457:in `block in run_tasks_blocks'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:240:in `call'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:240:in `block in execute'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:235:in `each'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:235:in `execute'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:179:in `block in invoke_with_call_chain'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/monitor.rb:211:in `mon_synchronize'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:172:in `invoke_with_call_chain'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:165:in `invoke'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1@global/gems/sprockets-rails-2.2.4/lib/sprockets/rails/task.rb:64:in `block (2 levels) in define'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:240:in `call'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:240:in `block in execute'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:235:in `each'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:235:in `execute'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:179:in `block in invoke_with_call_chain'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/monitor.rb:211:in `mon_synchronize'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:172:in `invoke_with_call_chain'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:201:in `block in invoke_prerequisites'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:199:in `each'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:199:in `invoke_prerequisites'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:178:in `block in invoke_with_call_chain'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/monitor.rb:211:in `mon_synchronize'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:172:in `invoke_with_call_chain'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/task.rb:165:in `invoke'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:150:in `invoke_task'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:106:in `block (2 levels) in top_level'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:106:in `each'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:106:in `block in top_level'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:115:in `run_with_threads'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:100:in `top_level'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:78:in `block in run'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:176:in `standard_exception_handling'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rake/application.rb:75:in `run'
/Users/grantspilsbury/.rvm/rubies/ruby-2.2.1/bin/rake:33:in `<main>'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1/bin/ruby_executable_hooks:15:in `eval'
/Users/grantspilsbury/.rvm/gems/ruby-2.2.1/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => environment

【问题讨论】:

标签: css ruby-on-rails-4 heroku


【解决方案1】:

根据我所见,您有许多问题需要解决,因为您的问题与 CSS 有关,我会去那里:

Mixed Content: The page at 'https://applicantlabs.herokuapp.com/' was loaded over HTTPS, but requested an insecure resource 'http://player.vimeo.com/video/57175742?title=0&byline=0&portrait=0&color=e2007a'. This request has been blocked; the content must be served over HTTPS.
applicantlabs.herokuapp.com/:401 

Mixed Content: The page at 'https://applicantlabs.herokuapp.com/' was loaded over HTTPS, but requested an insecure resource 'http://www.youtube.com/embed/ySJhFCtVTUQ?list=UUvNBXWGykQrWb7kPAn5eLUQ'. This request has been blocked; the content must be served over HTTPS.
application-4ed64624ca6f0911d127cb1a8d49f3c36aedeffcb9f0216df950229bb9db906c.js:13549 

Uncaught TypeError: Cannot read property 'defaults' of undefined
application-4ed64624ca6f0911d127cb1a8d49f3c36aedeffcb9f0216df950229bb9db906c.js:13496 

Uncaught TypeError: Cannot read property 'layoutColors' of undefined application-4ed64624ca6f0911d127cb1a8d49f3c36aedeffcb9f0216df950229bb9db906c.js:13496 

最后两个错误在编译的资产中。这被标记为未定义:

   colors: mvpready_core.layoutColors

这也被标记为未定义

$.extend( true, DataTable.defaults, {...

您编译的 CSS 资源构造不正确,数据看起来已损坏。文件名是welcome-xxx.css,而不是标准的application-xxxxx.css,它也充满了损坏的数据,而不是CSS。这是你的 CSS:

bookmark88�S`�^�,^��A�SApplicationsMAMPhtdocsmvp-release-2.0.1  mvp-themebower_componentsanimate.cssanimate.min.css $0@\p��)�'7�����l�
m�Xm��n�
o� ���,<LA�ŕ�   file:///���������EE����������E6OXdknnkdXO6ic11o�PNG

现在,调试此 CSS 问题的下一步是要求您运行:

$bundle exec rake assets:precompile RAILS_ENV=production

请发布它创建的资产的文件名。如果创建了一个 CSS 文件,里面有什么?

【讨论】:

  • 我添加了 $bundle exec rake assets:precompile RAILS_ENV=production 的输出
  • 那么,是的,我们在数据库上有一个明显的错误并且预编译失败。您使用的是 MySQL 还是 PostgreSQL?
  • 在我添加新的 CSS 主题之前,该应用程序运行良好。数据库按预期工作
【解决方案2】:

bootstrap_and_overrides.css 文件中需要 Font Awesome,然后在 app/assets/stylesheets/application.css 中又需要 Font Awesome,这个副本导致了一个奇怪的预编译 css 文件。从 app/assets/stylesheets/application.css 中删除 *= require font-awesome 后,css 样式就被正确编译了

【讨论】:

  • 如果您可以预编译并且它可以在本地工作,这不会是问题。你解决了你的问题,但你真的不知道原因。
  • 我删除了重复的 css 文件,然后它就可以工作了。你有多确定我不知道原因?
  • 非常确定。你对抗的是症状,而不是根源。之前不是在本地运行吗?问题只出在 Heroku 上,对吧?
  • 它从未停止在本地工作。一旦我添加了新的 css 文件,它就停止在 heroku 上工作。在推向 heroku 之前,我研究了很长时间,所以我不知道是哪个更改导致了这个问题。格式怪异的 css 文件在混乱的文本中包含“font-awesome”一词,因此我删除了重复的 require 语句,并删除了 css 中混乱/怪异的文本
  • 没错,所以本地没有问题。但是在 Heroku 上你做到了。您通过删除重复项解决了问题,但您并不真正知道真正的原因是什么。为什么它在本地工作而不是在 Heroku 上工作?
【解决方案3】:

在资产中更改 Rails.application.config.assets.version = '1.0'。 rb 到 Rails.application.config.assets.version = '1.1' 这对我有用

【讨论】:

  • 不,这没有任何区别。不过谢谢
猜你喜欢
  • 2014-07-24
  • 1970-01-01
  • 2015-12-25
  • 2015-09-22
  • 2015-12-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多