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

这也是我一直在挣扎的事情。一方面，我想高度定制变量。更少的文件与我自己的颜色和设置。另一方面，我想稍微改变一下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选择器定义了两次。因此浏览器需要做一些改进来找出实际应用的内容。这不太干净。

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

如果(仅当)你有时间，你就能像我一样做这件事。我保留了我自己修改过的框架版本，每当框架更新时，我都会阅读文档并检查源代码是否有修改。

乍一看，这个解决方案可能听起来不那么理想，但我有理由这么做。我使用的不是单一的框架，而是许多框架、最佳实践、重置/规范化样式表等的混合体，我总是确信没有更新会以我没有看到的任何方式改变现有的项目。

出于以下原因，我正在使用自己的自定义框架。

我去掉了所有我不需要的东西保持模块化和小 我使用我的框架来处理客户的工作，我想a)知道我到底在做什么，b)拥有我卖给客户的所有东西。我不是简单地复制和使用框架，而是尝试理解和重新创建框架 我将我的框架与CMS结合使用，不能简单地将框架丢弃并忘记到项目中/从头开始

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