Bootstrap Sass Rails 4 customize style
I am trying to customize the styling of my rails app with a boot file Less variables here.
I am using bootstrap Sass and I have included all the javascript css and fonts in mine /vendor/assets
.
I followed Eric Minkel's tutorial 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 customization, I created a file bootstrap_and_customization.css.scss
in assets/stylesheet/
that 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 had no bootable assets in my vendor folder. After I enabled them, these styles stopped working.
The problem is, none of these styles work in my application and I can't figure out what's going wrong.
source to share
Bootstrap doesn't use any variables in its style. It uses normal styles with values, for example:
.col-md-12{width: 100%;} // it a value, in this case 100% and not some variable
If you want to use the variables that you have defined, you need to import the variable file into the files where you want to use them. Let's say you have a file named custom.css.scss where you want to use your variables, what you need to do:
@import "bootstrap_and_customization";
.some_class{font-family: $font-family-sans-serif;}
I want to use this global variable in my application
Instead of requiring it in separate files, what you can do is create a new file, say style.css.scss, and import all of your stylesheet files, for example:
@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 have to remove require_tree as you need each file separately inside style.css .scss) or you can also change application.css to application.css.scss and do the same
source to share