用编译的变量覆盖 Bootstrap.less

【问题标题】：Override of Bootstrap with compiled variables.less用编译的变量覆盖 Bootstrap.less
【发布时间】：2013-10-29 22:13:48
【问题描述】：

我正在尝试覆盖 variables.less 文件中的 @grid-float-breakpoint:。（为了调整顶部菜单的折叠宽度）

在我的索引文件中，我正在导入 Bootstrap 核心文件 css 文件：

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

然后我在导入编译和调整后的变量文件。

<link rel="stylesheet/less" type="text/css" href="less/variables.less">

为什么我的 variables.less 没有覆盖 bootstrap.min.css？

【问题讨论】：

标签： twitter-bootstrap overriding collapse nav

【解决方案1】：

无法以这种方式覆盖变量，因为它们已经编译为 CSS。 Less 是一个预处理器，因此您需要覆盖它们，然后编译并包含您编译的 css。为此，您可以使用各种命令行工具（我使用 http://gruntjs.com/ 和 https://npmjs.org/package/grunt-contrib-less ）或者有应用程序！

请注意，您需要一个单独的 less 文件，其中包含您的自定义值，然后在导入 variables.less 后将其导入，例如

@import "bootstrap.less"; /* Imports all the bootstrap less files in the correct order, including variables.less */
@import "custom-variables.less"; /* Your custom less variables */

查看这个答案Overriding Bootstrap LESS variables after @import了解更多详情。

【讨论】：

我没想过制作另一个自定义 variables.less 文件。它帮助了我。谢谢！
很高兴能帮上忙！如果此解决方案对您有用，您能否将其标记为已接受（请参阅：meta.stackoverflow.com/help/someone-answers）？谢谢。