Bootstrap Sass Rails 4 customize styling

别说谁变了你拦得住时间么 提交于 2020-01-13 13:45:28

问题


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.


回答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



来源:https://stackoverflow.com/questions/25281456/bootstrap-sass-rails-4-customize-styling

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!