Jasny Bootstrap具有较少的预编译器-无法修改更少的变量
提前感谢你的阅读。
使用CDN，我将以下API/库集成到我的项目中：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<link rel="stylesheet/less" type="less" href="custom/main.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>我还导入了jquery和less，但没有使用CDN。
我在添加Jasny (上面)之前使用的less文件工作得很好；在导入Jasny集之前，我的main.less文件从引导带导入了所有的less变量和混合器。Main.less看起来是这样的：
@import "less/bootstrap.less";
@import "jasny-variables.less";
@navmenu-width: 225px;当我实现来自Jasny Bootstrap的“off画布”组件时，这也很好；会出现一个off画布菜单，并将所有内容推到右边。
但是，当我试图更改一些Jasny less变量(或者像上面那样将它们添加到我的main.less文件中，或者在main.less从同一个目录导入的jasny-variables.less文件中直接修改它们)时，我看不到任何结果。
具体来说，我试图将@navmenu-width的值更改为小于默认值。然而，无论我给它什么价值，在任何一个源中，它都不会改变。
有什么建议吗？
回答 1
Stack Overflow用户
发布于 2014-10-04 17:11:17
如果您想要更改jasny-引导少变量，您需要下载它的源代码 (右边有“下载zip”按钮)，并将所有它的更少的文件导入您的main.less文件中。
有一个jasny-bootstrap.less文件，它包含所有其他文件的导入。您需要将所有这些文件按完全相同的顺序包含到您的main.less文件中，但是在导入variables.less之后立即更改任何变量。
或者直接导入jasny-bootstrap.less，并在@import "variables.less";行之后将任何更改的变量添加到该文件中。
如果我正确地理解了您，您的代码应该如下所示：
index.html：
<head>
<link rel="stylesheet/less" type="less" href="custom/main.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>
</head>正如您所看到的，这里没有指向引导程序或jasny引导css的链接，因为我们在下面的较少部分中包含了这个链接。
main.less：
@import "bootstrap/bootstrap.less";//jasny requires bootstrap to be included first
@import "jasny-bootstrap/variables.less";//jasny's variables, which we can overwrite below
//your variables go here
@navmenu-width: 225px;
//the rest of jasny less files below
// Core CSS
@import "grid-container-smooth.less";
@import "button-labels.less";
// Components
@import "nav-tab-alignment.less";
@import "navmenu.less";
@import "alerts-fixed.less";
// Components w/ JavaScript
@import "offcanvas.less";
@import "rowlink.less";
@import "fileinput.less";
//more of your own less directives go here
...如果您在html中包含了jasny-bootstrap.css，然后在have中包含了jasny-bootstrap.less，而没有jasny的其他.less文件，这可能是对变量的更改没有覆盖预呈现CSS的定义的原因。
- 包括bootstrap.less
- 包括jasny-引导/Variables.less-定义jasny的vars
- 用值覆盖变量
- 包含jasny的其他较少的代码来使用覆盖的变量，并呈现新的CSS指令，这些指令将覆盖默认的引导指令。
jasny-引导源代码以及.less文件可以从这里下载：https://github.com/jasny/bootstrap。
https://stackoverflow.com/questions/26194929
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号