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

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

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

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 .

А в 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';

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

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


person Cyzanfar    schedule 13.08.2014    source источник
comment
вам нужно импортировать это в файлы, где вы хотите использовать эти переменные   -  person Mandeep    schedule 13.08.2014
comment
о каком файле вы говорите? У меня есть только один файл css.scss, который я создаю для настройки bootstrap_and_customization.css.scss   -  person Cyzanfar    schedule 13.08.2014
comment
вы не используете там переменные для стиля? что-то вроде: .class_name{background: $body-bg;}   -  person Mandeep    schedule 13.08.2014
comment
Вы говорите, что вам нужно импортировать это в файлы, где вы хотите использовать эти переменные. Я хочу использовать эту глобальную переменную во всем приложении.   -  person Cyzanfar    schedule 13.08.2014


Ответы (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 и сделать то же самое

person Mandeep    schedule 13.08.2014
comment
Я извиняюсь за то, что я такой нуб, но я не совсем понимаю, что вы говорите. Куда я должен включить свой пользовательский файл начальной загрузки scss, чтобы он работал? - person Cyzanfar; 13.08.2014
comment
@Cyzanfar Ааа, все в порядке. Используете ли вы эти переменные в своем коде? - person Mandeep; 13.08.2014
comment
Я хотел бы, чтобы все в bootstrap_and_customization.css.scss влияло на все мое приложение. Это именно то, что я ищу. - person Cyzanfar; 13.08.2014
comment
@Cyzanfar это не может повлиять на все ваше приложение, просто объявив переменные. Это точно так же, как переменные ruby ​​или любые переменные языка программирования. Вы только что определили эти переменные в файле bootstrap_and_customization.css.scss, но вы должны использовать эти переменные в своих стилях, чтобы увидеть изменения :) - person Mandeep; 13.08.2014