css - Upgrading Rails application to bootstrap3 -

hi have been following michael hartl's book developing rails applications. have reached end , want start using bootstrap3 app i've developed.

i have followed instructions on https://github.com/twbs/bootstrap-sass has not worked. gem has installed correctly , can work on local environment changing application.css --> application.css.scss , adding import "bootstrap" statement file along having in custom.css.scss. doesn't seem right , doesn't work when deploy heroku either.

the set trying work follows.

gem file

source "http://rubygems.org"  ruby '2.0.0'  gem 'rails', '4.0.1' gem 'sass-rails' gem 'bootstrap-sass' gem 'bcrypt-ruby', '3.1.2' gem 'faker', '1.1.2' gem 'will_paginate' gem 'bootstrap-will_paginate' gem 'sprockets', '2.11.0' gem 'pg'  gem 'uglifier' gem 'coffee-rails' gem 'jquery-rails' gem 'turbolinks' gem 'jbuilder'  group :development, :test    gem 'rspec-rails'   gem 'guard-rspec'   gem 'spork-rails'   gem 'guard-spork'   gem 'childprocess' end  group :test   gem 'selenium-webdriver'   gem 'capybara'   gem 'growl'   gem 'factory_girl_rails', '4.2.1' end  group :doc   gem 'sdoc', require: false end  group :production   gem 'rails_12factor' end 

application.css

/* * manifest file that'll compiled application.css, include    files * listed below. * * css , scss file within directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can referenced here using relative path. * * you're free add application-wide styles file , they'll appear @ top of * compiled file, it's better create new file per style scope. * *= require_self *= require_tree . */ 

custom.css.scss

@import "bootstrap";  /*mixins, variables etc. */ $graymediumlight: #eaeaea;  @mixin box_sizing{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* universal */  html {   overflow-y: scroll; }  body {   padding-top: 60px; } ... ... 

ideally think should changing application.css .css.scss , having importing bootstrap there without needing in custom.css.scss too. causing error when deploying heroku, saying application.css required.

update

as per advice bellow have removed

import "bootstrap"; 

from custom.css.scss , added renamed application.css.scss. looks @import "bootstrap"; @import "custom";

i cleared tmp folder using

rake tmp:clear 

and refreshed page.

individually importing css.scss files seems have solved problems

i try solution proposed yourself, use application.css.scss instead of application.css , use @import instead of require mentioned in rails guide:

if want use multiple sass files, should use sass @import rule instead of these sprockets directives. using sprockets directives sass files exist within own scope, making variables or mixins available within document defined in. can file globbing using @import "", , @import "*/*" add whole tree equivalent how require_tree works. check sass-rails documentation more info , important caveats.

check sass-rails' documentation more.