Rails, bootstrap-sass

Question

I am unable to get bootstrap to work in my layout, I can't seem to figure out why. I did rm app/assets/stylesheets/application.css

Any help would be much appreciated.

Gemfile

source 'https://rubygems.org'

ruby '2.1.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0.beta2'
# Use postgresql as the database for Active Record
gem 'pg'

gem 'rails_12factor', group: :production
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0.0.beta1'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jQuery as the JavaScript library
gem 'jquery-rails', '~> 4.0.0.beta2'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'debugger' anywhere in the code to stop execution and get a debugger console
  gem 'pry-rails'
  gem 'byebug'

  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0.0.beta4'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

app/assets/stylesheets/custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>THE BLOGGER</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="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <nav>
          <ul class="nav navbar-nav pull-right"></ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

saskcan saskcan · Accepted Answer · 2014-10-13T22:32:49

You should not remove the application.css manifest file. You should, however, change it's name to application.css.scss. This way it can be preprocessed by SASS.

If you are including the imports for bootstrap in a separate file as you do in your example (custom.css.scss), you must ensure that this file are included in the application manifest. The require_tree directive that is included by default does this (you need to have the file located in the /stylesheets directory, like you do):

#application.css or application.css.scss
*= require_tree .

However, since you are using SCSS, I recommend the following approach:

#application.css.scss
#...
#all your files and directives
#...
@import "bootstrap-sprockets";
@import "bootstrap";

This way, it is not necessary to have a separate file like custom.css.scss

Rails, bootstrap-sass

1 Answers