How to use spree_bootstrap_theme in Spee - ruby-on-rails-3

Question

I feel a little obscure in understanding the Guide to install spree_bootstrap_theme (https://github.com/Andrewmp1/spree_bootstrap_theme) . Do you have any suggesions for me? Thanks a lot!
Below is what I have done:
Create a new sandbox for spree.
Add to Gemfile:
gem 'spree_bootstrap_theme', :git => 'git://github.com/Andrewmp1/spree_bootstrap_theme.git'
Rename application.css inside stylesheets to application.css.scss
Create a new file: bootstrap_and_overrides.css.scss inside stylesheets folder.
Add to bootstrap_and_overrides.css.scss this below line:
#import 'store/spree_bootstrap_theme';
Open application.js, add:
//= require bootstrap
Run rails server
Result I received: http://imageshack.us/f/405/spreet.png/
As you can see, the layout was broken.
I view source the file and do not see anything about bootstrap. What I got is here:
<meta content="Spree demo site" name="description" />
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/assets/normalize.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/skeleton.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/screen.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/spree_core.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/spree_promo.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/all.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="BoSR3FtvQBjqF68s7amtXGMVypmaW68e7tHhRzYvqzw=" name="csrf-token" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.validate/jquery.validate.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/store/checkout.js?body=1" type="text/javascript"></script>
<script src="/assets/store/product.js?body=1" type="text/javascript"></script>
<script src="/assets/store/cart.js?body=1" type="text/javascript"></script>
<script src="/assets/store/spree_core.js?body=1" type="text/javascript"></script>
<script src="/assets/store/spree_promo.js?body=1" type="text/javascript"></script>
<script src="/assets/store/all.js?body=1" type="text/javascript"></script>
I TRIED TO ADD gem 'bootstrap-sass' to the Gemfile too but the result in both case is THE SAME as above.

Answer 1

I've just created a file, inside stylesheets/store, named "spree_bootstrap.scss" with the content:
#import 'store/spree_bootstrap_theme'
After that, i removed the code below from stylesheets/store/all.css
*= require store/spree_core
*= require store/spree_promo
And the same for javascripts/store/all.js:
//= require store/spree_core
//= require store/spree_promo
And i included the following, in javascripts/store/all.js::
//= require bootstrap
Start your server and you'll see the correct style of spree_bootstrap_theme.

Answer 2

I think you should not rename application.css to application.css.scss . The file application.css is a special purpose file . Here you can read about its format and syntax .