Bootstrap 使用编译的变量重写引导程序,less

envsm3lx  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(174)

我正在尝试覆盖@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?

t9eec4r0

t9eec4r01#

因为变量已经被编译成CSS了,所以不可能用这种方式覆盖变量。预处理器比较少,所以你需要覆盖它们,然后编译并包含编译后的css。为此,你可以使用各种命令行工具(我使用http://gruntjs.com/https://npmjs.org/package/grunt-contrib-less),或者有一些应用程序!
请注意,您需要一个单独的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

相关问题