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"; 

我有一个测试页面设置试试这个：

  
 
test terms
 
h1. Bootstrap heading Secondary text
 
.dfd..
 
..sdfas.
 
..sdfs.
 
.asdf..
 
.adf..
 
test terms
 Default 
 Info 

当我启动服务器并访问该页面时，它以纯文本呈现而没有引导程序样式。

任何有关做什么的想法将不胜感激。 看来这里的一些人不使用gem。 这种方法有原因吗？ 非常感谢！

Answer 1

几天前我遇到了几乎同样的问题。 我的配置完全相同，但只有少数Bootstrap的样式效果不起作用（尤其是bg-whatever-color）。 几个gem更新后，问题就消失了。

我更新了一些我的gem

 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"; 

希望能帮助到你！

Answer 2

这是我的设置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 ）。