css - 如何正确编译 Bootstrap Less？

Question

编译 Bootstrap Less 文件的正确顺序是什么？我也有一些外部 Less 文件，想将它们全部编译成一个。

我应该先使用 bootstrap.less 还是从 custom.less 开始？

1. bootstrap.less
2. bootstrap-extend.less
3. base.less
4. site.less
5. ...

通过此命令，自定义设计 bootstrap-extend.less、base.less 和 site.less 没有优先级，不会在布局中显示。如果我改变顺序而不是它有双类和 CSS 增长。

Answer 1

最好的方法是使用 npm bootstrap 包并使用所选工具(grunt 或您喜欢的任何 less 编译器)编译它。您可以从bootstrap Getting started下载。页面。

您可以在 variables.less 和 bootstrap-theme.less 中进行自定义。编辑它们，并在编译 bootstrap.less 之前用你的覆盖原来的。这会将您的定制集成到 bootstrap.css/.css.min 文件中。任何其他非常适合您的元素的样式都应该在单独的文件中完成。通过这种方式，您可以轻松升级 Bootstrap 版本。您可以为此使用 .less，并使用 @import 相同的 variables.less 和原始的 mixins.less 来简化您的编码。例如，您可以使用 variables.less 中定义的颜色来混合创建自定义按钮。

有一个有趣的工具可以准备这些文件:http://bootstrap-live-customizer.com/完成后，您可以下载这两个文件，但要注意下载包含所有变量的文件，而不仅仅是修改后的文件(在此工具配置中修改它)。

最后一步可能是将所有 .css 文件连接并缩小到一个文件中。您可以为此使用 grunt 或任何其他工具。