一个更好的方法是借鉴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文件更改时自动构建项目。

这也是我一直在挣扎的事情。一方面，我想高度定制变量。更少的文件与我自己的颜色和设置。另一方面，我想稍微改变一下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导入的其余部分中编译。这并不完美，但这是一种权宜之计，对我来说效果很好。

我的解决方案与jstam的类似，但我尽可能避免对源文件进行更改。考虑到对bootstrap的更改将是频繁的，我希望能够拉下最新的源代码，并通过将修改保存在单独的文件中来进行最小的更改。当然，它并不是完全防弹的。

Copy the bootstrap.less and variables.less to the parent directory. Rename bootstrap.less to theme.less or whatever you want. Your directory directory structure should look like this: /Website theme.less variables.less /Bootstrap ... Update all the references in theme.less to point to bootstrap sub-directory. Ensure that your variables.less is referenced from the parent and not the bootstrap directory like so: ... // CSS Reset @import "bootstrap/reset.less"; // Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "bootstrap/mixins.less"; // Grid system and page structure @import "bootstrap/scaffolding.less"; @import "bootstrap/grid.less"; @import "bootstrap/layouts.less"; ... Add your CSS overrides in the theme.less file immediately after where they are included. ... // Components: Nav @import "bootstrap/navs.less"; @import "bootstrap/navbar.less"; // overrides .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { border-radius: 0 0 0 0; padding: 10px; } .nav-tabs, .nav-pills { text-transform: uppercase; } .navbar .nav > li > a { text-shadow: none; } ... Link to theme.less instead of bootstrap.less in your HTML pages.

无论何时出现新版本，您所做的更改都应该是安全的。每当出现新版本时，您还应该对自定义引导文件进行区分。变量和导入可能会改变。

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

自定义较少文件

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

但还有一件事:

覆盖方式

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

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

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

一个更好的方法是借鉴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文件更改时自动构建项目。