用编译变量覆盖Bootstrap

Question

我想覆盖@grid-float-breakpoint：在variables.less文件中。 （为了调整顶部菜单的崩溃宽度）

在我的索引文件，我正在导入引导核心文件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？

Answer 1

因为它们已经被编译为CSS，所以不可能用这种方式覆盖变量。少就是一个预处理器，所以你需要重写它们，然后编译并包含你编译的CSS。为此，您可以使用各种命令行工具（我使用http://gruntjs.com/和https://npmjs.org/package/grunt-contrib-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了解更多详情。