用編譯變量覆蓋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瞭解更多詳情。