如何将（静态）引导模板合并到rails资产管道中？

Question

我使用twitter bootstrap，rails 3.2.1和twitter-bootstrap-rails gem制作主页（https://github.com/seyhunak/twitter-bootstrap-rails）。

想要尝试不同于传统twitter的其他外观，并从bootswatch.com找到了一个名为“United”的优秀模板。

我下载了四个文件（bootstrap.css/bootstrap.min.css/variables.less/bootswatch.less）。

如何将这些文件合并到资产管道中？

以下是我的'app/assets'目录中的列表（这些文件由twitter-bootstrap-rails gem生成）。

/images/rails.png 
/javascripts/application.js 
/javascripts/bootstrap.js.coffee 
/javascripts/products.js.coffee 
/stylesheets/application.css 
/stylesheets/bootstrap_and_overrides.css.less 

我不知道。

Answer 1

如果您检查bootswatch的安装系统上，你只需要在需要的网站上下载bootstrap.min所以它加入你的application.css

//= require bootstrap.min.css 

您可以删除所有自举要求了。

Answer 2

我使用相同的gem（bootstrap-sass-rails），有时我从bootswatch下载自定义主题。我的方法很简单：

• 我只下载variables.less文件，我检查，我需要哪些变量（颜色，字体等），然后我将它们转换为SCSS语法

• AFTER变量上面定义的，我用SCSS语法（而不是// =要求），要求自举组件（你通常并不需要所有的捆绑）

这里有一个简单的例子：

// Navbar 
$navbarBackground:    #DD4814; 
$navbarBackgroundHighlight:  #CE4213; 
// other vars... 

@import "twitter/bootstrap/variables"; 
@import "twitter/bootstrap/mixins"; 
@import "twitter/bootstrap/reset"; 
@import "twitter/bootstrap/scaffolding"; 
@import "twitter/bootstrap/grid"; 
@import "twitter/bootstrap/layouts"; 
// etc... 

这样你就可以用更小的CSS和更多的方式来定制它。

Answer 3

这种宝石使用较少的很好，但有人做集成定制Twitter的引导模板简单：

https://github.com/scottvrosenthal/twitter-bootswatch-rails