如何自定義Bootstrap而不丟失更改？

我正在使用Bower來管理Bootstrap，並且想對默認的Bootstrap外觀進行一些更改（顏色，字體大小等）。這是我的工作流程：如何自定義Bootstrap而不丟失更改？

編輯使用grunt build

問題bower_components/bootstrap/less/variables.less

重新編譯自舉的是，我希望能夠升級引導當一個新的版本出來，想必我會失去我的更改爲variables.less。

有沒有一種方法可以讓我的更改保持在bower_components以外，並且還可以避免在源代碼管理中擁有bower_components，因爲它是122MB？

來源

2014-07-15 donturner

我的答案能幫你嗎？ – solidau

是的，用你的和其他各種答案，我已經知道了。下面發佈答案。非常感謝。 – donturner

您可以創建一個variables-custom.less並將其導入theme.less這樣的：

// 
// Load core variables and mixins 
// -------------------------------------------------- 

@import "variables.less"; 
//import custom-variables after variables so the values will override. 
@import "custom-variables.less"; //only has variables that have changed. 
@import "mixins.less";

IMO這是一個有點比第一更好的解決方案，因爲你不會有裝載兩個（幾乎）相同的CSS的文件客戶。

對不起，我不能幫你什麼約鮑爾和你的源代碼控制，因爲我不使用鮑爾

來源

2014-07-16 00:17:17 solidau

您應該創建自己的樣式表，與您自定義的樣式表一起使用。這樣你可以做出改變，但根本不會改變bootstrap。

此外，當您更新時，您的樣式表保持不變。

這允許你改變Bootstrap的部分而不是實際改變文件，你會覆蓋它。

要清楚，您的第二個CSS文件將顯着更小...只需將需要更改的內容放入其中即可。

來源

2014-07-16 00:05:21 Josh

下面是這爲我工作的解決方案：

使用bower安裝所有UI包例如bower install bootstrap chosen
創建一個單獨的文件夾less其中包含所有LESS修改。 This article was very helpful here。

這是我的less/styles.less文件：

@import "../bower_components/bootstrap/less/bootstrap.less"; 
@import "../bower_components/bootstrap-chosen/bootstrap-chosen.less"; 

//My custom variables - overrides the bootstrap variables file 
@import "variables-custom.less";

使用grunt監視less文件夾內的變化和它們編成的.css

這裏是我的Gruntfile.js（thanks to this answer）：

module.exports = function(grunt) { 
    grunt.initConfig({ 
     less: { 
      development: { 
       options: { 
        paths: ["./less"], 
        yuicompress: true 
       }, 
       files: { 
        "./static/css/styles.css": "./less/styles.less" 
       } 
      } 
     }, 
     watch: { 
      files: "./less/*", 
      tasks: ["less"] 
     } 
    }); 
    grunt.loadNpmTasks('grunt-contrib-less'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
};

來源

2014-07-21 19:13:33 donturner

這樣做的問題是：如果變量文件更改會怎麼樣？您將不得不將變化鏡像到您的自定義變量文件中。但如果您只是覆蓋自定義變量中的必要變量，那麼您將進行的更改更少。更重要的是覆蓋而不是重新創建 – solidau

這就是我'variables.less'文件所做的，它只是覆蓋了一些引導變量。也許我應該將它重命名爲'variables-custom.less' – donturner

This確實是最好的定製方法。你創建一個theme.less，並且拉入原始的Bootstrap文件（它可以在將來升級），並在同一個文件中調用你自己的自定義覆蓋。您可以從不在Bower目錄中的自定義文件導入它們，也可以在自己的theme.less文件中編寫自定義規則。您也可以在this教程中找到該技術。

隨着Grunt，自定義設置可能會變得棘手。但與Brunch這是一塊蛋糕（是的！），所有幾乎都自動。你的奶奶可以做到這一點。

至於避免在源代碼管理中包含bower_components：使用Git很容易。您只需登記您的bower.json，但一定要將/bower_components添加到您的.gitignore文件中。

來源

2014-07-24 20:39:35 montecruiseto

如何自定義Bootstrap而不丟失更改？

回答

相關問題