Bootstrap Sass Rails 4 customize styling

Question

I'm trying to customize the styling of my rails app with bootstrap Less variables available here. I am using the bootstrap Sass and I included all javascript css and fonts in my /vendor/assets.

I followed Erik Minkel tutorial word for word or should I say code for code.

In assets/javascript/application.js

//= require jquery
//= require jquery.countdown
//= require bootstrap
//= require jquery_ujs
//= require tinymce-jquery
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require_tree .

And in assets/stylesheets/application.css

    *= require_tree .
     *= require 'masonry/transitions'
     *= require jquery.countdown
     *= require bootstrap
     *= require_self
     */

For the customization I created a bootstrap_and_customization.css.scss file in assets/stylesheet/ which looks like this:

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

    $body-bg:                                                   #ecf0f1;
    $font-family-sans-serif:                'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    $navbar-height:                                        45px;
    $navbar-default-bg:                          white;
    $navbar-default-brand-color:      black;
    $brand-primary:                                    #c0392b;
    $jumbotron-bg:                                         white;
    $link-color: #e74c3c;
    @import 'bootstrap';

The code above worked fine when I didn't have the bootstrap assets into my vendor folder. After I included them, these styling stopped working.

The problem is that none of these styling work in my app and I can't figured out what's going wrong.

Answer 1

Bootstrap doesn't use any variables in its style. It uses normal styles with values, like:

.col-md-12{width: 100%;} // it's a value, in this case 100% and not some variable

If you want to use the variables which you have defined, you need to import your variable file in files where you want to use them. Lets say you have a file named custom.css.scss where you want to use your variables then you need to do:

@import "bootstrap_and_customization";

.some_class{font-family: $font-family-sans-serif;}

I want to use these global variable across my whole app

Instead of requiring it in individual files what you can do is make a new file, lets say style.css.scss and import all of your stylesheet files there, something like:

@import "bootstrap_and_customization";
@import "file1";
@import "file2";

This will allow you to use variables inside file1.css.scss and file2.css.scss and then you can require style.css.scss inside application.css(also you'll have to remove require_tree since you are requiring each file individually inside style.css.scss) or you can also change application.css to application.css.scss and do the same thing