Question

I have two different sets of CSS files that I want to use for the same website hosted with heroku.

The first set of CSS files are the standard Twitter BootStrap CSS files converted to SASS. The second set are custom settings for my application.

I have been able to get the look and feel right on my development server but when I upload it to heroku the output is just

<body>
<head>
</head>
</body>

Please help!

My site is configured as such:

http://imgur.com/S5Aoov1&V3RNQZ3&lSJqpCz&jdSfy82

My controlling layout file is:

doctype 5
 html data-uuid=current_user.try(:id)
  = render 'head'
  = render 'third_party_scripts'


 body class=controller_name
  = render 'navbar'
  = render partial: 'account/infobar'
   .container
   = render partial: 'flash', locals: { flash: flash }
   = yield

I've duplicated this file and named it "_home.html.slim" I've changed the contents to:

head
 title = t('.title', default: 'My Winning Trade')
  = stylesheet_link_tag 'home', media: 'all'
  = stylesheet_link_tag 'justified-nav', media: 'all'
  = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Shanti|Open+Sans:400,700,800'
  = javascript_include_tag 'jquery'
  = csrf_meta_tags

The CSS for my landing pages are called home & justified-nav, based on the jumbotron example provided by twitter bootstrap. http://getbootstrap.com/examples/jumbotron/

Heroku Error logs after Asset Precompile:

2013-10-04T19:48:42.124903+00:00 app[web.1]: Completed 500 Internal Server Error in 384ms
2013-10-04T19:48:42.127966+00:00 app[web.1]:     3:   = stylesheet_link_tag 'home', media: 'all'
2013-10-04T19:48:42.127966+00:00 app[web.1]: 
2013-10-04T19:48:42.127966+00:00 app[web.1]:     1: head
2013-10-04T19:48:42.127966+00:00 app[web.1]:   app/views/layouts/sessions.html.slim:3:in `_app_views_layouts_sessions_html_slim__3803347664834042281_69939052542640'
2013-10-04T19:48:42.127966+00:00 app[web.1]:     2:   title = t('.title', default: 'My Winning Trade')
2013-10-04T19:48:42.128146+00:00 app[web.1]: 
2013-10-04T19:48:42.127966+00:00 app[web.1]: ActionView::Template::Error (home.css isn't precompiled):
2013-10-04T19:48:42.127966+00:00 app[web.1]:     4:   = stylesheet_link_tag 'justified-nav', media: 'all'
2013-10-04T19:48:42.127966+00:00 app[web.1]:     5:   = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Shanti|Open+Sans:400,700,800'
2013-10-04T19:48:42.127966+00:00 app[web.1]:     6:   = javascript_include_tag 'jquery'
2013-10-04T19:48:42.127966+00:00 app[web.1]:   app/views/application/_home.html.slim:3:in `_app_views_application__home_html_slim___3730913017080964654_69939053460220'
2013-10-04T19:48:42.128146+00:00 app[web.1]: 
Was it helpful?

Solution

I'm not sure I completely understand what you're asking. But it sounds like:

  • You have a single layout file.
  • You want to load a single set of stylesheets in one set of views
  • In another set of views, you want to additionally load a second stylesheet.

Is that correct? If so, couldn't you just do something like this in your layout:

doctype 5
  html data-uuid=current_user.try(:id)
    = render 'head'
    = render 'head_foobar' if controller_name == 'foobar'

OTHER TIPS

The issue ended up being the home.css file not compiling on the heroku server side.

By changing the production.rb file setting:

from:

config.assets.compile = false

to:

config.assets.compile = true

The layout configuration that @Manishie suggested worked!

Thank you everyone!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top