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.

you need to import this in files where you want to use these variables — Mandeep, Aug 13 '14 at 08:33
which file are you talking about? I only have one css.scss file which is the one I create for customization `bootstrap_and_customization.css.scss ` — Cyzanfar, Aug 13 '14 at 08:35
you are not using there variables for styling? something like: `.class_name{background: $body-bg;}` — Mandeep, Aug 13 '14 at 08:37
You're saying "you need to import this in files where you want to use these variables". I want to use these global variable across my whole app. — Cyzanfar, Aug 13 '14 at 08:43

Mandeep · Accepted Answer · 2014-08-13T09:18:48.960

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

edited Aug 13 '14 at 09:18

answered Aug 13 '14 at 09:13

Mandeep

9,093
2
26
36

I apologies for being such a noob but I'm not quite getting what you are saying. Where should I include my custom bootstrap scss file for it to work? – Cyzanfar Aug 13 '14 at 18:18
@Cyzanfar Ahh it's alright. Are you using these variables in your code? – Mandeep Aug 13 '14 at 18:23
I would like everything into bootstrap_and_customization.css.scss to affect my whole app. That's what I'm looking for exactly. – Cyzanfar Aug 13 '14 at 18:24
1

@Cyzanfar it can't affect your whole app just by declaring variables. These are just like ruby variables or any programming language variables. You have just defined these variables in your bootstrap_and_customization.css.scss but you have to use these variables in your styles to see changes :) – Mandeep Aug 13 '14 at 18:28

Bootstrap Sass Rails 4 customize styling

1 Answers1

Linked