Question

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

修改bower_components/bootstrap/less/variables.less
使用grunt build

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

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

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

IMO这比第一个解决方案好一点，因为你不必在客户端上加载两个（几乎）相同的CSS文件。

对不起，我不能帮助您解决有关Bower和源控制的问题，因为我不使用Bower

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

Answer 3

This确实是最好的自定义方法。您可以创建一个theme.less并提取原始的Bootstrap文件（可以在将来升级），并在同一个文件中调用您自己的自定义覆盖。要么@import它们来自不在Bower目录中的自定义文件，要么只是在theme.less本身中编写自定义规则。你会发现这个技术也在this教程中解释过。

使用Grunt，自定义设置可能会变得棘手。但是对于Brunch来说，这是一块蛋糕（是的！）并且几乎都是自动的。你的奶奶可以做到。

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

Answer 4

您应该创建自己的样式表，并将其与第二个列出的自定义样式表一起使用。这样你就可以进行更改，但根本不能改变引导程序。

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

这允许您更改Bootstrap的各个部分但不实际更改文件，而是覆盖它。

要明确的是，你的第二个CSS文件会显着缩小......只需要你需要改变它。

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

4 个答案: