这也是我一直在挣扎的事情。一方面，我想高度定制变量。更少的文件与我自己的颜色和设置。另一方面，我想稍微改变一下Bootstrap文件，以简化升级过程。

我的解决方案(目前)是创建一个插件LESS文件，并将其插入引导。导入变量和mixins后，文件会更少。就像这样:

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

这样，如果我想重置引导颜色，字体或添加额外的mixins，我可以。我的代码是单独的，但将在Bootstrap导入的其余部分中编译。这并不完美，但这是一种权宜之计，对我来说效果很好。

这也是我一直在挣扎的事情。一方面，我想高度定制变量。更少的文件与我自己的颜色和设置。另一方面，我想稍微改变一下Bootstrap文件，以简化升级过程。

我的解决方案(目前)是创建一个插件LESS文件，并将其插入引导。导入变量和mixins后，文件会更少。就像这样:

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

这样，如果我想重置引导颜色，字体或添加额外的mixins，我可以。我的代码是单独的，但将在Bootstrap导入的其余部分中编译。这并不完美，但这是一种权宜之计，对我来说效果很好。

我得到了和乔尔一样的解决方案:

自定义较少文件

就像上面描述的:我为所有我正在定制的Less文件创建本地副本:例如:"variables-custom. "”、“alerts-custom少。”、“buttons-custom.less”少。所以我可以使用一些标准，并有我自己的补充。缺点是:当Bootstrap更新时，它真的很难迁移。

但还有一件事:

覆盖方式

在寻找工作流程时，我经常看到有人建议简单地重写样式。因此，您首先导入标准的Less文件，然后在底部添加自定义声明。这样做的好处是:更容易更新到新版本。缺点是:编译后的CSS文件包含所有重写。一些CSS选择器定义了两次。因此浏览器需要做一些改进来找出实际应用的内容。这不太干净。

我想知道为什么预处理器不够聪明来解决这样的双重声明?我在这里还缺少什么更好的工作流程吗?

一个更好的方法是借鉴Bootswatch github项目swatchmaker。这个项目是专门为建立和管理网站上的数十个Bootstrap主题量身定制的。

项目中的Makefile构建swatchmaker。Less(您可以将其重命名为customizations.less)。这个文件包含了一堆导入:

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

您可以重命名swatch文件夹和bootswatch。更少的文件，只要你觉得合适。

这是有意义的，因为您可以升级Bootstrap而不影响您自己的文件。事实上，Makefile还包含获取Bootstrap最新版本的命令。更多信息请参见项目页面上的README。

作为奖励，README还建议您安装watchr gem，它将在.less文件更改时自动构建项目。

只需添加@import "../../styles.less";(或样式表所在的任何位置)来引导。底部少一些。这允许你在自己的styles.less中使用Bootstrap mixins，如.gradient或.border-radius。

在我这边，我只有一个名为theme的文件。少了一个进口的bootstrap。在下面我重写了我不想更新的变量值(即使使用less看起来不好，但是，它更容易维护)。

这对于在variables.less中自定义变量值非常有效

之后，我编译我的主题。更少的文件，而不是bootstrap.less

示例theme.less:

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;