Question

Working on a project that started out with Bootstrap 2.3, using the bootstrap-sass gem, specifying version 2.3.1.0 in my gemfile. I'm wanting to update it to Bootstrap 3.

Here's what the app looks like with bootstrap-sass gem version 2.3.1.0:

enter image description here

I checked out a branch to experiment updating the styles to Bootstrap 3, so I updated my gemfile to use the latest version of the bootstrap-sass gem, ran bundle update and install.

I have bootstrap 3 version classes on each of the "Amazing Point" div elements you saw above, so the styles in the hero unit should vanish, the buttons should go flat, and the amazing points should span 4 columns with the "col-lg-4" class I've specified.

But when I launch the rails server, I get a mix of Bootstrap 2.3 and 3:

enter image description here

The "col-lg-4" classes applied to the Amazing Points, BUT the sign in and sign up buttons still look like Bootstrap 2.3 buttons! And there's a subtle, but visible change in the "Sign In" and "Sign Up" text - it's a tad bolder. It's like I've got some weird hybrid of Bootstrap 2.3 and 3 going on.

But now I run rake assets:precompile, and here's what I get:

enter image description here

Now things are displaying correctly.

But why do I always have to run rake assets:precompile to get it working correctly? And how could I make it where it would just update automatically when I switch between the gem files?

Here are the other relevant files:

application.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 vendor/assets/stylesheets of plugins, if any, 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require bootstrap
*= require_tree .
*/

Gemfile:

source 'https://rubygems.org'

gem 'rails', '3.2.13'
gem 'jquery-rails'
gem 'devise'

group :production do
   gem 'pg'
end

group :development do
  gem 'sqlite3'
end

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
  gem 'bootstrap-sass', '3.0.2.0'
end

Gemfile.lock (I'll just show the bootstrap-sass version):

bootstrap-sass (3.0.2.0)
  sass (~> 3.2)

application.rb:

require File.expand_path('../boot', __FILE__)

require 'rails/all'

if defined?(Bundler)
  # If you precompile assets before deploying to production, use this line
  Bundler.require(*Rails.groups(:assets => %w(development test)))
  # If you want your assets lazily compiled in production, use this line
  # Bundler.require(:default, :assets, Rails.env)
end

module Bloccit
  class Application < Rails::Application

  config.encoding = "utf-8"

  # Configure sensitive parameters which will be filtered from the log file.
  config.filter_parameters += [:password]

  # Enable escaping HTML in JSON.
  config.active_support.escape_html_entities_in_json = true

  config.active_record.whitelist_attributes = true

  # Enable the asset pipeline
  config.assets.enabled = true

  # Version of your assets, change this if you want to expire all your assets
  config.assets.version = '1.0'

  config.assets.initialize_on_precompile = false
  end
end

relevant lines in config/development.rb:

# Do not compress assets
config.assets.compress = false

# Expands the lines which load the assets
config.assets.debug = true

config.assets.compile = true

config.serve_static_assets = false
Was it helpful?

Solution

Ok, so I believe I've figured some of this out, after checking out this blog post.

For some reason, if you're updating from the Bootstrap 2.3 bootstrap-sass gem version to the latest one, YOU MUST clean out your old bootstrap-sass gem.

So I ran gem list bootstrap-sass which gave me:

*** LOCAL GEMS ***

bootstrap-sass (3.0.2.0)
bootstrap-sass (2.3.1.0)

Run gem cleanup bootstrap-sass -d and you'll be given a preview of what will happen. Then run gem cleanup bootstrap-sass -v and it will uninstall all previous versions. Restart your rails server and it works.

Then if you were wanting to go back to the old bootstrap-sass version, you would need to update your gemfile, run bundle, and then run gem uninstall bootsrap-sass 3.0.2.0 or whichever later bootstrap-sass gem that you have.

This is kind of a pain, so if someone knows a better way of going about this, please share. I might see if the bootstrap-sass-rails gem offers a better experience.

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