如何將（靜態）引導模板合併到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