How to upload a "wrap bootstrap" theme for Rails 3.2 to Heroku

Question

I bought a theme from http://wrapbootstrap.com.

The theme says, "Uses LESS: No" Made with Bootstrap 2.2.1, HTML5/CSS3

I can't get the theme to work/upload to Heroku. Does anyone know what I'm doing wrong? The theme runs fine on localhost. When I try to precompile the assets before upload to Heroku I get:

$ RAILS_ENV=production bundle exec rake assets:precompile --trace
** Invoke assets:precompile (first_time)
** Execute assets:precompile
/Users/mark/.rvm/rubies/ruby-1.9.3-p125/bin/ruby /Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets --trace
** Invoke assets:precompile:all (first_time)
** Execute assets:precompile:all
** Invoke assets:precompile:primary (first_time)
** Invoke assets:environment (first_time)
** Execute assets:environment
** Invoke tmp:cache:clear (first_time)
** Execute tmp:cache:clear
** Execute assets:precompile:primary
rake aborted!
Invalid CSS after "  width: ": expected expression (e.g. 1px, bold), was ";"
  (in /Users/mark/Documents/websites/hosting/linkedsocial/app/assets/stylesheets/application.css)
(sass):10934
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:1134:in `expected'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/script/lexer.rb:199:in `expected!'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/script/parser.rb:471:in `assert_expr'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/script/parser.rb:49:in `parse'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:1008:in `sass_script'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:868:in `value!'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:845:in `declaration'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:568:in `block in declaration_or_ruleset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:1108:in `call'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:1108:in `rethrow'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:578:in `declaration_or_ruleset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:540:in `block_child'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:532:in `block_contents'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:521:in `block'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:515:in `ruleset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:539:in `block_child'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:532:in `block_contents'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:70:in `stylesheet'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/scss/parser.rb:27:in `parse'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/engine.rb:342:in `_to_tree'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/engine.rb:315:in `_render'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-3.2.3/lib/sass/engine.rb:262:in `render'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sass-rails-3.2.5/lib/sass/rails/compressor.rb:8:in `compress'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/compressors.rb:74:in `compress'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/processing.rb:243:in `block in css_compressor='
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/processor.rb:29:in `call'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/processor.rb:29:in `evaluate'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/tilt-1.3.3/lib/tilt/template.rb:76:in `render'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/context.rb:193:in `block in evaluate'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/context.rb:190:in `each'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/context.rb:190:in `evaluate'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/bundled_asset.rb:26:in `initialize'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:252:in `new'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:252:in `build_asset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/index.rb:93:in `block in build_asset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/caching.rb:19:in `cache_asset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/index.rb:92:in `build_asset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:169:in `find_asset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/index.rb:60:in `find_asset'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/static_compiler.rb:19:in `block in compile'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:219:in `block in each_logical_path'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:206:in `block (2 levels) in each_file'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:196:in `each'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:196:in `each_entry'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:204:in `block in each_file'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:203:in `each'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:203:in `each_file'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/sprockets-2.2.2/lib/sprockets/base.rb:217:in `each_logical_path'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/static_compiler.rb:18:in `compile'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/assets.rake:56:in `internal_precompile'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/assets.rake:70:in `block (3 levels) in <top (required)>'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:227:in `call'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:227:in `block in execute'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:222:in `each'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:222:in `execute'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:166:in `block in invoke_with_call_chain'
/Users/mark/.rvm/rubies/ruby-1.9.3-p125/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:159:in `invoke_with_call_chain'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:152:in `invoke'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/assets.rake:60:in `block (3 levels) in <top (required)>'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:227:in `call'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:227:in `block in execute'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:222:in `each'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:222:in `execute'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:166:in `block in invoke_with_call_chain'
/Users/mark/.rvm/rubies/ruby-1.9.3-p125/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:159:in `invoke_with_call_chain'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:152:in `invoke'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:141:in `invoke_task'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:99:in `block (2 levels) in top_level'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:99:in `each'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:99:in `block in top_level'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:108:in `run_with_threads'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:93:in `top_level'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:71:in `block in run'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:158:in `standard_exception_handling'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:68:in `run'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/bin/rake:37:in `<top (required)>'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/bin/rake:19:in `load'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/bin/rake:19:in `<main>'
Tasks: TOP => assets:precompile:primary
rake aborted!
Command failed with status (1): [/Users/mark/.rvm/rubies/ruby-1.9.3-p...]
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/file_utils.rb:53:in `block in create_shell_runner'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/file_utils.rb:45:in `call'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/file_utils.rb:45:in `sh'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/file_utils_ext.rb:40:in `sh'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/file_utils.rb:80:in `ruby'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/file_utils_ext.rb:40:in `ruby'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/assets.rake:12:in `ruby_rake_task'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/assets.rake:21:in `invoke_or_reboot_rake_task'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/actionpack-3.2.9/lib/sprockets/assets.rake:29:in `block (2 levels) in <top (required)>'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:227:in `call'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:227:in `block in execute'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:222:in `each'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:222:in `execute'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:166:in `block in invoke_with_call_chain'
/Users/mark/.rvm/rubies/ruby-1.9.3-p125/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:159:in `invoke_with_call_chain'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/task.rb:152:in `invoke'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:141:in `invoke_task'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:99:in `block (2 levels) in top_level'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:99:in `each'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:99:in `block in top_level'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:108:in `run_with_threads'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:93:in `top_level'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:71:in `block in run'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:158:in `standard_exception_handling'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/lib/rake/application.rb:68:in `run'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/gems/rake-10.0.2/bin/rake:37:in `<top (required)>'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/bin/rake:19:in `load'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/bin/rake:19:in `<main>'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/bin/ruby_noexec_wrapper:14:in `eval'
/Users/mark/.rvm/gems/ruby-1.9.3-p125@linkedsocial/bin/ruby_noexec_wrapper:14:in `<main>'
Tasks: TOP => assets:precompile

Here is my Gemfile:

source 'https://rubygems.org'

gem 'rails', '3.2.9'


group :development do
  gem 'sqlite3', '1.3.5'
end


group :assets do
  gem 'sass-rails',   '~> 3.2.5'
  gem 'coffee-rails', '~> 3.2.2'

  gem 'uglifier', '>= 1.2.3'
end

gem 'jquery-rails', '2.0.2'

group :production do
  gem 'pg', '0.12.2'
  gem 'thin'
end

I added all the files in the Assets section as follows:

assets
  Folder-fancybox
    blank.gif
    fancybox_loading.gif
    fancybox_sprite.png
    jquery.fancybox.css
    jquery.fancybox.js
    jquery.fancybox.pack.js
  Folder-images
  Folder-javascripts
    application.js
    bootstrap.js
    bootstrap.min.js
    html5-3.4-respond-1.1.0.min.js
    jquery-1.8.2.js
    jquery-1.8.2.min.js
    jquery.anchor.js
    pages.js.coffee
    script.js
  Folder-stylesheets
    animate.css
    application.css
    bootstrap.css
    bootstrap.min.css
    Folder-font
      fontawesome-webfront.eot
      fontawesome-webfront.svg
      fontawesome-webfront.ttf
      fontawesome-webfront.woff
    font-awesome-ie7.css
    font-awesome.css
    pages.css.scss
    styles.css

Take a look at the formatting options to make your question more readable. — CraigTeegarden, Dec 18 '12 at 03:26
Sorry for the newbie question but what do you mean by formatting options? I didn't see any formatting options under any of the menu items. thx — MMark, Dec 18 '12 at 16:15
When you are editing your question or creating a new one there should be a title bar above the text box with formatting options, plus the bright orange '?' that you can click on to show more details about the formatting options. — CraigTeegarden, Dec 19 '12 at 19:50

score 0 · Answer 1 · answered Dec 18 '12 at 16:06

Heroku is unable to handle your stylesheets because it doesn't expect that they are in LESS (See http://lesscss.org/). First, you'll have to change the extensions of all your stylesheets (or at least the ones in LESS) to filename.css.less. Then, you need to include a LESS parser in your gemfile like so:

group assets do
    gem 'less-rails'
    gem 'coffee-rails', '~> 3.2.2'
    gem 'uglifier', '>= 1.2.3'
end

If you're not using SASS (.css.scss) then you probably don't need the sass-rails gem. You can also use the less gem but I don't know how it is different from less-rails.

It should work after that. If not, try running heroku run rake assets:precompile. If it still doesn't work, you may have to add this to your application.rb:

config.assets.initialize_on_precompile = false

Also, you should check out a gem called less-rails-bootstrap. It would replace your bootstrap.min.css. If your theme uses LESS, there is a good chance it expects your bootstrap to be in LESS as well in order to use variables, mixins, functions, etc.

Ok, I'm confused a bit. You said "it doesn't expect that they are in LESS". The theme is not in LESS. So now what? — MMark, Dec 19 '12 at 00:02
For some reason, when I first read your question it didn't register with me that "Uses LESS: No" meant that it wasn't in LESS. Sorry for confusing you, glad you got it working! — Xavier, Dec 22 '12 at 04:57

score 0 · Accepted Answer · answered Dec 18 '12 at 21:33

0

It looks like there might just be some invalid CSS in the template. Somewhere in your bundled stylesheets you have a missing value set for "width: ;".

Since the theme specifies "Uses LESS: No" Made with Bootstrap 2.2.1, HTML5/CSS3", I don't think LESS is the issue. Instead, rails parses your CSS in production to minify it, and if there is any CSS errors it will throw an error.

You can reproduce this error locally by precompiling your assets. Otherwise on your dev machine your assets don't go through the same process.

answered Dec 18 '12 at 21:33

stereoscott

13,309
4
33
34

I'm a Rails/Bootstrap newbie so I'm not sure how this is supposed to be setup. But yes, the error "width:;" you refer to, the log says it is in file application.css. But that file is completely empty, no code. Maybe the problem is that there is supposed to be code there? I don't know. And yes, the error showing is from my trying to precompile the assets on the dev machine by executing this command: RAILS_ENV=production bundle exec rake assets:precompile --trace. Is this the correct execution? – MMark Dec 19 '12 at 00:00
Thanks, you were right. I found the "width:;" missing value and took it out. Then everything ran perfectly, precompile and upload to Heroku. Thanks everyone! – MMark Dec 19 '12 at 05:46

How to upload a "wrap bootstrap" theme for Rails 3.2 to Heroku

Here is my Gemfile:

2 Answers2