在沒有Rails或Compass的情況下使用Twitter Bootstrap for SASS

我正在嘗試使用Twitter Bootstrap for SASS，但目前尚未集成到Rails項目中，我不需要從Compass獲得的內容。我（想我）想要一個Ruby腳本，它將生成我的CSS，JS和Font文件並將它們放在正確的位置，但花了幾個小時圍繞文檔轉圈圈，我無法弄清楚。在沒有Rails或Compass的情況下使用Twitter Bootstrap for SASS

我有一個目錄，如：

site/ 
    css/ 
    bootstrap_variables.scss 
    application.scss 
    site.scss 
    fonts/ 
    index.html 
    js/

css/bootstrap_variables.scss包含引導的默認變量我自定義的變化。

css/site.scss包含站點特定的非Bootstrap CSS。

css/application.scss看起來是這樣的：

@import "bootstrap_variables.scss"; 

// Import Bootstrap modules I need, but not others. 
@import "bootstrap/variables"; 
@import "bootstrap/mixins"; 
// ... etc 

@import "site.scss"

我已經安裝了bootstrap-sass寶石。現在我想要一個腳本：

過程css/application.scss與SASS和輸出css/application.css。
將需要的Bootstrap JavaScript放入js/的單個文件中。（我如何指定我需要哪個JS模塊？）
如果我使用Bootstrap的圖標，請在fonts/中放置圖形字體。

如果這聽起來像是瘋了，而且我對這完全錯了，那麼隨時也可以告訴我！

來源

2014-01-22 Phil Gyford

對不起復制他們爲這個沒用評論，但'CSS'標籤必要這個問題？ –

你需要一個sass編譯器，羅盤有什麼問題？ –

@HashemQolami你是對的，是的 - 我猜我的頭被困在CSS中，但這裏沒有關係。 –

，現在我想一個腳本，做：

我不知道爲什麼你需要這個腳本在所有。因爲如果你可以運行腳本，你也可以安裝sass並運行sass css/application.scss css/application.css。您可以通過運行bower install bootstrap-sass將所有引導程序的文件安裝到您的site文件夾中，然後運行sass命令和--load-path選項，該選項應該指向您的bower_components文件夾。您還可以複製/或鏈接bower_components文件夾中所需的JavaScript和字體。

或考慮使用Gulp或Grunt來設置您的構建鏈。

但您可以通過編程方式使用Sass。

用SASS處理css/application.scss並輸出css/application.css。

你script.rb看起來應該像如下圖所示：

/usr/bin/env ruby 

require 'sass' 
require 'bootstrap-sass' 

sass_engine = Sass::Engine.for_file('css/application.scss',{ 
    :style => :compact, 
    :syntax => :scss 
}) 

output = sass_engine.render 

File.open("css/application.css", 'w+') {|f| f.write(output) }

請注意，您也應該有對autoprefixer整合。

把引導的JavaScript我需要到JS單個文件/

安裝引導，薩斯寶石，你可以閱讀從寶石的JavaScript文件後（參見：How to find the path a Ruby Gem is installed at (i.e. Gem.lib_path c.f. Gem.bin_path)）。

所以得到詞綴的內容插件，您可以使用：

file = File.new(Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/javascripts/bootstrap/affix.js", "r")

您可以讀取所需的腳本，並置其內容，縮小和複製

如果我使用Bootstrap的圖標，將字形字體放在字體/中。

如上所述，從Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/fonts

來源

2015-04-14 23:25:21

這個問題是前一段時間，我現在做的事情會有所不同（Gulp或Grunt，正如你所建議的）。但我會標記這個正確的，因爲它聽起來像回答了我的時間問題。謝謝！ –

在沒有Rails或Compass的情況下使用Twitter Bootstrap for SASS

回答

相關問題