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

Question

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

1. 编辑 bower_components/bootstrap/less/variables.less
2. 使用 grunt build 重新编译bootstrap

问题在于，我希望能够在新版本发布时升级Bootstrap，但我预计会失去对variables.less所做的更改。

有没有一种方法可以将我的更改保留在bower_components之外，并且避免将bower_components保存到源代码控制中，因为它的大小为122MB？

- donturner

---

我的回答对你有效吗？ - solidau

是的，通过您和其他人的回答，我已经弄清楚了。答案已在下面发布。非常感谢。 - donturner

Answer 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";

我认为这个解决方案比第一个更好，因为在客户端不需要加载两个几乎相同的CSS文件。

很抱歉我无法对Bower和您的源代码控制提供帮助，因为我不使用Bower。

- solidau

Answer 2

以下是我的解决方案：

• 使用bower安装所有UI包，例如bower install bootstrap chosen
• 创建一个名为less的单独文件夹，其中包含所有的LESS修改。 这篇文章对此非常有帮助。

以下是我的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文件（感谢这个回答）：

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

- donturner

---

这种做法的问题在于：如果变量文件发生了改变，你就必须将这些变化反映到你的定制变量文件中。但是，如果你只是在自定义变量中覆盖必要的变量，你需要进行的更改就会更少。覆盖而不是重新创建更符合DRY原则。 - solidau

这就是我的 variables.less 文件所做的事情，它只是覆盖了一些 Bootstrap 变量。也许我应该将其重命名为 variables-custom.less。 - donturner

Answer 3

这确实是最佳的定制方法。你可以创建一个theme.less文件并拉入原始的Bootstrap文件（这些文件可以在未来得到升级），然后在同一个文件中调用自己的自定义覆盖。你可以从不在Bower目录中的自定义文件中@import它们，也可以直接在你的theme.less中编写自定义规则。你会在此教程中找到这种技术的解释。

使用Grunt进行自定义设置可能会变得棘手。但是使用Brunch就像小菜一碟（是的！）而且几乎全部都是自动执行的。你的祖母也可以做到。

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

- montecruiseto

Answer 4

你应该创建自己的样式表，并将其与自定义样式表列在第二个位置。这样，您可以进行更改，但不会改变Bootstrap。

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

这使您能够更改Bootstrap的某些部分，而不实际更改文件，您正在覆盖它。

要明确，您的第二个CSS文件将显着较小...只放置需要更改的内容。

- Josh