如何在不丢失更改的情况下自定义 Bootstrap？答案

【问题标题】：How can I customise Bootstrap without losing the changes?如何在不丢失更改的情况下自定义 Bootstrap？
【发布时间】：2014-07-15 23:44:36
【问题描述】：

我正在使用 Bower 管理 Bootstrap，并希望对默认的 Bootstrap 外观和感觉进行一些更改（颜色、字体大小等）。这是我的工作流程：

编辑bower_components/bootstrap/less/variables.less
使用grunt build 重新编译引导程序

问题是我希望能够在新版本发布时升级引导程序，大概我会丢失对variables.less 的更改。

有没有办法让我的更改保持在bower_components 之外，并且避免在源代码管理中使用bower_components，因为它是 122MB？

【问题讨论】：

我的回答对你有用吗？
是的，有了你的答案和其他各种答案，我已经想通了。答案贴在下面。非常感谢。

标签： css twitter-bootstrap twitter-bootstrap-3 gruntjs bower

【解决方案1】：

您可以创建一个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 文件。

很抱歉，由于我不使用 Bower，我无法帮助您解决有关 Bower 和您的源代码管理的问题

【讨论】：

【解决方案2】：

这是对我有用的解决方案：

使用 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');
};

【讨论】：

这样做的问题是：如果变量文件改变了怎么办？您必须将更改镜像到您的自定义变量文件中。但是，如果您只是在自定义变量中覆盖必要的变量，则需要进行的更改会更少。覆盖而不是重新创建更干燥
这就是我的variables.less 文件所做的，它只是覆盖了一些引导变量。也许我应该把它重命名为variables-custom.less

【解决方案3】：

This确实是最好的自定义方式。您创建一个 theme.less 并拉入原始 Bootstrap 文件（将来可以升级），并在同一个文件中调用您自己的自定义覆盖。您可以从不在 Bower 目录中的自定义文件中 @import 它们，或者您只需在 theme.less 本身中编写自定义规则。您还可以在 this 教程中找到该技术的说明。

使用 Grunt，自定义设置可能会变得很棘手。但是对于Brunch，这简直是小菜一碟（是的！），几乎所有事情都会自动进行。你奶奶可以的。

至于避免在源代码控制中包含bower_components：使用 Git 很容易。您只需签入您的 bower.json，但请确保将 /bower_components 添加到您的 .gitignore 文件中。

【讨论】：

【解决方案4】：

您应该只创建自己的样式表，然后将两者与您的自定义样式表一起使用。这样您就可以进行更改，但根本不会更改引导程序。

此外，当您更新时，您的样式表保持不变。

这允许您更改 Bootstrap 的点点滴滴，但实际上并未更改文件，而是覆盖了它。

需要明确的是，您的第二个 CSS 文件会明显更小...仅将您需要更改的内容放入其中。

【讨论】：