Rails 同时使用 bootstrap-sass,bootstrap-rails

tangramor · September 03, 2013 · Last by nightire replied at September 04, 2013 · 5242 hits

我的环境是多用户环境(multiuser)RVM + Ruby 2.0.0 p247 + Rails 3.2.14,用了 https://github.com/RailsApps/rails3-bootstrap-devise-cancan 做模板来构建基础系统。这个模板使用的是 bootstrap-sass

在开发环境里面一切都很好,问题出在 assets:precompile,编译后的 js 不起作用,也就是说,bootstrap-dropdown, bootstrap-tab 这些在 production 环境下都不好使了。Google 了很多解决方案,试过都不好用。

然后我就想替换一下 bootstrap 实现试试,于是把 bootstrap-sass 换成了 anjlab-bootstrap-rails,assets 里面的 application.js 和 bootstrap_and_overrides.css.scss 都做了相应改动: application.js 是

//= require bootstrap 

改成

//= require twitter/bootstrap

bootstrap_and_overrides.css.scss 是

@import "bootstrap"; 

改成

@import "twitter/bootstrap"; 

然后注释掉了 @import "bootstrap-responsive"; 因为 bootstrap-rails 里面没有这个

重新 bundle install 和 rake assets:precompile 后,启动 rails s -e production,发现 bootstrap-dropdown、bootstrap-tab 这样的 js 功能都可用了,但是原来的 bootstrap css 不对了,标题栏从横向变成了标准的 ul 列表从上到下显示,把页面内容都挡住了。检查了 bootstrap-rails 的 css,发现它的实现不是标准的 bootstrap css,在它的 navbar 样式表定义里( https://github.com/anjlab/bootstrap-rails/blob/master/app/assets/stylesheets/twitter/bootstrap/_navbar.scss )没有 .navbar-inner 这样的类定义。

再次尝试过几种 stackoverflow 上的方案都不行,我决定不使用 bootstrap-rails 的样式表(删掉 bootstrap_and_overrides.css.scss 里面的@import "twitter/bootstrap";),把 bootstrap-sass 的样式表定义(~/.rvm/gems/ruby-2.0.0-p247/gems/bootstrap-sass-2.3.2.2/vendor/assets/stylesheets/bootstrap/*)给拷贝到了 app/assets/stylesheets/bootstrap_sass 目录下,删除了 bootstrap.scss 和 responsive.scss,给除 _variables.scss 和 _mixins.scss 之外的每个文件顶部加上了

@import "_variables";
@import "_mixins";

重新 bundle install 和 rake assets:precompile(它会自动包含 app/assets/stylesheets/bootstrap_sass 目录内容)后,启动 rails s -e production,一切 OK!

开发环境里一切都很好,assets:precompile后出问题其实应该考虑是否是uglifier的问题,我最近发现 uglifier 的 2.2.0 还是有点小问题,所以退回 2.1.2 了。

#1 楼 @ericguo 刚刚试验了一下,用 uglifier 2.1.2,assets:precompile 之后还是一样的问题

楼主治标不治本啊,为什么 css 不对,为什么 js 失效,都可以开浏览器调试工具找原因的。

#3 楼 @Rei 道理是这样的,不过没时间给它们 debug 啊,项目时间紧啊 而且 CSS 不对是 bootstrap-rails 自己的问题

检查了 bootstrap-rails 的css,发现它的实现不是标准的 bootstrap css,在它的 navbar 样式表定义里( https://github.com/anjlab/bootstrap-rails/blob/master/app/assets/stylesheets/twitter/bootstrap/_navbar.scss )没有 .navbar-inner 这样的类定义。

bootstrap-sass 仍然是 Bootstrap 2.3, anjlab-bootstrap-rails 已经是 Bootstrap 3 了,Bootstrap 3 已经没有.navbar-inner 了。

#5 楼 @chaixl 原来如此!谢谢!

技术演进速度太快,没跟上脚步啊~

#6 楼 @tangramor 一直都在用 Bootstrap-sass,没有问题的。不妨你把它也升级到 3 试试。

You need to Sign in before reply, if you don't have an account, please Sign up first.