[英]Bootstrap Sass with Rails 4
我正在嘗試在我的rails(4.0.0)項目中使用bootstrap-sass(3.1.0.2)和sass-rails(4.0.1)。
我的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文件位於stylesheets文件夾中,如下所示:
@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>
當我啟動服務器並訪問該頁面時,它以純文本形式呈現,而沒有引導樣式。
任何想法做什么都將不勝感激。 似乎這里有些人不使用寶石。 有這種方法的原因嗎? 非常感謝!
幾天前我遇到了幾乎相同的問題。 我的配置完全相同,但是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";
希望能幫助到你!
這是我使用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
)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.