Getting bootstrap-sass bootstrap CSS into production on Heroku

Question

I'm using the bootstrap-sass gem with my rails (3.2.5) app, and things are working great in my local dev environment. But when I deploy to prod on Heroku the bootstrap CSS isn't included in the compiled assets.

I added bootstrap-sass and sass-rails to my Gemfile:

gem 'bootstrap-sass', '2.0.3.1'

group :assets do
  gem 'sass-rails',   '3.2.4'
end

And I added an import for Bootstrap to a custom.css file in my assets dir:

@import "bootstrap";

Basic stuff. Any idea why this isn't working in Prod?

Asma Zubair · Accepted Answer · 2013-09-24 18:10:45Z

4

I was running into exact same problem. These are the steps I followed to resolve the issue:

Add " *= require bootstrap" right above " *= require_tree ." in application.css.
Then I did "bundle install --without production"
Then I ran "rake assets:precompile"
Then I did git add .
Then I committed the changes git commit -m "blah..."
Then push changes to production "git push heroku master"

answered Sep 24, 2013 at 18:10

Asma Zubair

4281 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MZB Over a year ago

+1 A slightly unsatisfactory solution (due to adding precompiled outputs to git), but worked for me with Rails 4.0.1 / Ruby 2.0.0 / boostrap-saas 3.0.1.0rc where nothing else did! I created a separate custom.css.scss and used @import "bootstrap" as the documentation recommended, however.

hyperrjas · Accepted Answer · 2012-06-19 08:03:49Z

2

You must add a bootstrap_and_overrides.css.scss file in your app/assets/stylesheets with the next:

// Set the correct sprite paths
$iconSpritePath: asset-url('glyphicons-halflings.png', image);
$iconWhiteSpritePath: asset-url("glyphicons-halflings-white.png", image);

@import "bootstrap";
@import "bootstrap-responsive";

Also, you must add in your application.js:

//= require bootstrap

Regards!

answered Jun 19, 2012 at 8:03

hyperrjas

10.8k25 gold badges103 silver badges200 bronze badges

4 Comments

Josh Over a year ago

Thanks. I did that, but the bootstrap CSS still doesn't make it to production at all.

hyperrjas Over a year ago

If you have this config, your problem is not bootstrap or your assets. Your problem is in your deploy or in your rails version. I have this config and it does works fine in my linode production server. Regards!

Josh Over a year ago

I'm sure you're right. I don't know how to debug the deploy problem though. My solution was just to create a new empty project, copy over my app, and everything works fine. Moving on :)

Zain Zafar Over a year ago

There's a problem with the answer. You need to use asset-path instead of asset-url. The bootstrap-sas gem is already wrapping the returning asset path inside background-image: url(...);. Using asset-url returns the asset path enclosed in url and therefore doubles the url(url(...)). The correct syntax is to use $iconSpritePath: asset-path('glyphicons-halflings.png', image);

Collectives™ on Stack Overflow

Getting bootstrap-sass bootstrap CSS into production on Heroku

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related