Bootstrap Sass с Rails 4

Я пытаюсь использовать bootstrap-sass (3.1.0.2) и sass-rails (4.0.1) в своем проекте rails (4.0.0).

Мой файл application.css.scss выглядит так:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
*= require_self
*= require font-awesome
*= require_tree .
*/

Мой файл bootstrap_and_overrides.css.scss находится в папке таблиц стилей и выглядит так:

@import "bootstrap";

У меня есть тестовая страница, чтобы попробовать это:

    <div class="container">
<h2>test terms</h2>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="bg-primary">.dfd..</p>
<p class="bg-success">..sdfas.</p>
<p class="bg-info">..sdfs.</p>
<p class="bg-warning">.asdf..</p>
<p class="bg-danger">.adf..</p>
<p>test terms</p>


<button type="button" class="btn btn-primary">Default</button>

</div>
<button type="button" class="btn btn-info">Info</button>

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

Любые идеи о том, что делать, будут оценены. Кажется, некоторые люди здесь не используют драгоценные камни. Есть ли причина для такого подхода? Большое спасибо!


ruby-on-rails css bootstrap-sass
person Mel    schedule 08.02.2014    source источник
comment
не могли бы вы опубликовать источник html-страницы? у него может быть какая-то информация. Также файл макета, если можно   -  person Muntasim    schedule 08.02.2014
comment
Вы запускали bundle?   -  person Ivan Zamylin    schedule 08.02.2014
comment
Вы пытались выполнить требуемую загрузку в application.css.scss? Или попробуйте добавить require внутрь config/application.rb (у меня сработал второй способ, первый выдавал ошибки)   -  person Marko Jurinčič    schedule 08.02.2014
comment
Привет, Марко, мне это не требовалось, потому что совет по getbootstrap предполагает, что это не позволит мне изменить стиль на других листах. Спасибо за совет, хотя - я попробую, если не найду другого способа заставить его работать. Спасибо еще раз   -  person Mel    schedule 09.02.2014

Ответы (2)


arrow_upward
5
arrow_downward

Я столкнулся с почти такой же проблемой несколько дней назад. Моя конфигурация была точно такой же, но не работали только некоторые эффекты стиля Bootstrap (особенно bg-whatever-color). После обновления нескольких драгоценных камней проблема исчезает.

Некоторые из моих драгоценных камней, которые я обновил

gem 'rails', '4.0.3'
gem "bootstrap-sass", "~> 3.1.1.0"
gem 'font-awesome-sass'
gem 'sass-rails', '~> 4.0.0'

Не забывайте:

bundle update

Часть моего application.scss, чтобы дать вам представление

*= require jquery.ui.all
*= require select2
*= require font-awesome
*/

@import "mixin_and_var";
// changing the breakpoint value before importing bootstrap style
// This change is made for the menu (navbar) to collapse on tablet for better view
$screen-sm:1024px;
@import "bootstrap";

@import "general_layout";
@import "header";
@import "footer";
@import "menus";
@import "pagination";
@import 'login';
@import "error";

Надеюсь, поможет!

person coding addicted    schedule 23.03.2014

arrow_upward
0
arrow_downward

Вот моя настройка с https://github.com/twbs/bootstrap-sass:

# Gemfile
gem 'bootstrap-sass'

# application.css.scss
/*
 *= require_self
 *= require vendor
 * require_tree .
 */

@import "bootstrap";

// Import individual stylesheet
@import "base"; /* app/assets/stylesheets/base.css.scss */
@import "events"; /* app/assets/stylesheets/events.css.scss */

require_tree . отключен, но вместо этого импортируются отдельные файлы CSS (base, events).

person Victor    schedule 08.02.2014
comment
Привет Виктор, спасибо, что поделились. Интересно, важен ли порядок действий css. У меня есть import bootstrap в отдельном файле в папке таблиц стилей, который подхватывается деревом. Я попробовал вашу настройку, и мне не повезло с ней, но я попытаюсь создать новый проект - возможно, где-то есть ошибка, из-за которой он не работает. Большое спасибо за ответ. - person Mel; 09.02.2014
comment
Да, порядок импорта CSS важен. В моем случае, если в моем base.css.scss есть body { background: white }, а в моем events.css.scss есть body { background: red }, вместо этого body background будет red, потому что последний переопределяет прежний CSS. Используйте github.com/twbs/bootstrap-sass. - person Victor; 09.02.2014