Bootstrap Sass Rails 4 настроить стиль

Question

Я пытаюсь настроить стилизацию моего приложения rails с помощью начальной загрузки переменных, доступных здесь. Я использую загрузчик Sass, и я включил все JavaScript и шрифты в свой /vendor/assets,

Я следовал за учебником Эрика Минкеля слово в слово или я должен сказать код для кода.

В 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 .

И в assets/stylesheets/application.css

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

Для настройки я создал bootstrap_and_customization.css.scss файл в assets/stylesheet/ который выглядит так:

@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';

Приведенный выше код работал нормально, когда у меня не было ресурсов начальной загрузки в папке поставщика. После того, как я включил их, эти стили перестали работать.

Проблема в том, что ни один из этих стилей не работает в моем приложении, и я не могу понять, что происходит не так.

Answer 1

Bootstrap не использует никаких переменных в своем стиле. Он использует нормальные стили со значениями, например:

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

Если вы хотите использовать переменные, которые вы определили, вам нужно импортировать файл переменных в файлы, где вы хотите их использовать. Допустим, у вас есть файл с именем custom.css.scss, где вы хотите использовать свои переменные, тогда вам нужно сделать:

@import "bootstrap_and_customization";

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

Я хочу использовать эти глобальные переменные во всем приложении

Вместо того, чтобы требовать его в отдельных файлах, вы можете создать новый файл, скажем style.css.scss и импортировать туда все ваши файлы стилей, что-то вроде:

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

Это позволит вам использовать переменные внутри file1.css.scss и file2.css.scss, а затем вы можете потребовать style.css.scss внутри application.css(также вам придется удалить require_tree, поскольку вы требуете каждый файл отдельно внутри style.css.scss) или вы также можете изменить application.css на application.css.scss и сделать то же самое