Michael Hartl chapter 5 Bootstrap error

Question

I'm trying to include Bootstrap to my sample web project (chapter 5 Hartl's Rails Tutorial) and error occurs:

Sprockets::CircularDependencyError in StaticPages#home

Showing /home/ror/rubys/sample_app/app/views/layouts/application.html.erb where line #5 >raised:

/home/ror/rubys/sample_app/app/assets/stylesheets/application.css has already been required

 <html>
 <head>
 <title><%= full_title(yield(:title)) %></title>
  <%= stylesheet_link_tag "application", media: "all",
 "data-turbolinks-track" => true %>
 <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
 <%= csrf_meta_tags %>

I create app/assets/stylesheets/custom.css.scss and add @import "bootstrap"; there and add config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) to config/application.rb

Gemfile

source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0'
gem 'bootstrap-sass', '2.3.2.0'
gem 'sprockets', '2.11.0'



group :development, :test do
  gem 'sqlite3', '1.3.8'
  gem 'rspec-rails', '2.13.1'
  gem 'guard-rspec', '2.5.0'
end

group :test do
 gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
# Linux: раскомментируйте эти строки.
   gem 'libnotify', '0.8.0'
end
gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'

group :doc do
  gem 'sdoc', '0.3.20', require: false
end

group :production do
  gem 'pg', '0.15.1'
  gem 'rails_12factor', '0.0.2'
end

application.html.rb

<!DOCTYPE html>
    <html>
      <head>
        <title><%= full_title(yield(:title)) %></title>
        <<%= stylesheet_link_tag "application", media: "all",
                                       "data-turbolinks-track" => true %>
        <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
        <%= csrf_meta_tags %>
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

      </head>
      <body>
        <header class="navbar navbar-fixed-top navbar-inverse">
          <div class="navbar-inner">
        <div class="container">
          <%= link_to "sample app", '#', id: "logo" %>
          <nav>
            <ul class="nav pull-right">
              <li><%= link_to "Home",    '#' %></li>
              <li><%= link_to "Help",    '#' %></li>
              <li><%= link_to "Sign in", '#' %></li>
            </ul>
          </nav>
        </div>
          </div>
        </header>
        <div class="container">
          <%= yield %>
        </div>
      </body>
    </html>

user3865871 user3865871 · Accepted Answer · 2014-07-23T21:34:35

Try removing app/assets/stylesheets/application.css.

Also You have a typo in your application.html.rb file. An extra '<' was added.

 <<%= stylesheet_link_tag "application", media: "all",
                                   "data-turbolinks-track" => true %>

should be

  <%= stylesheet_link_tag "application", media: "all",
                                   "data-turbolinks-track" => true %>

Thanks.

Michael Hartl chapter 5 Bootstrap error

Gemfile

application.html.rb

1 Answers