CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapherokuproduction
user1549913
user1549913

Reputation: 67

Bootstrap css file is added automatically in production but no locally as it should be in Rails App

Okay so this is a pretty weird problem, I have a Rails app that uses the bootstrap grid and no other bootstrap css file. Locally everything renders just fine, but in production mode, (I'm using Heroku) it seems as though the bootstrap css stylesheet is being added, and I have no idea where it's coming from or why it's doing this. It wasn't doing this before and I'm pretty sure I haven't added anything that would automatically include the bootstrap css styles. I hope I'm missing something obvious here, but I just can't pin-point the problem and it has never happend before, hopefully you guys can tell me what I'm doing wrong. I'll post my gem file as I think it must have something to do with that:

source 'https://rubygems.org'

gem 'rails', '3.2.12'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'jquery-rails', '2.0.2'
gem 'activeadmin'

gem 'rename'
gem 'obscenity'

gem 'omniauth'
gem 'omniauth-facebook'

group :development, :test do
  gem 'sqlite3', '1.3.5'
  gem 'rspec-rails', '2.11.0'
  gem 'guard-rspec', '1.2.1'
  gem 'guard-spork', '1.2.0'  
  gem 'spork', '0.9.2'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '3.2.5'
  gem 'coffee-rails', '3.2.2'
  gem 'uglifier', '1.2.3'
end

group :test do
  gem 'capybara', '1.1.2'
  gem 'factory_girl_rails', '4.1.0'
  gem 'cucumber-rails', '1.2.1', :require => false
  gem 'database_cleaner', '0.7.0'
  # gem 'launchy', '2.1.0'
  # gem 'rb-fsevent', '0.9.1', :require => false
  # gem 'growl', '1.0.3'
end

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

Here is my application.css file:

/*
* 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_tree .
*/

And here is my application.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= full_title(yield(:title)) %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>

  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>


    <!-- Application alerts -->
    <% flash.each do |key, value| %>
     <div class="alert alert-<%= key %>">
        <div class="container">
          <%= value if value.length > 0 %>
        </div>
      </div>
    <% end %>

    <%= render "layouts/nav" %>

    <%= yield %>

    <%= render "layouts/footer" %>

</body>
</html>

Upvotes: 1

Views: 226

Answers (2)

JCC
JCC

Reputation: 463

This solution of moving the active_admin.css.scss to the vendor folder also helped me in making some strange conflicts on my home page disappear. I'm using Rails 4 with Bootstrap 3. Mine was displaying problems such as the nav bar links showing underlines and this is only in development, not production.

Upvotes: 0

user1549913
user1549913

Reputation: 67

Okay, so I solved my problem. The idea causing the problem was correct, except it wasn't bootstrap, it was active_admin. Active_admin stylesheet was conflicting with my own stylesheets, I thought it was bootstrap because of some of the UI similarities. All I had to do to fix the problem was move the active_admin.css.scss from app/assets/stylesheets/ to vendor/stylesheets. Problem fixed.

Upvotes: 1

Related Questions