Question

提前感谢您阅读。

使用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 Bootstrap（上面）之前使用的less文件工作正常;我的main.less文件在导入Jasny集之前从Bootstrap导入所有less变量和mixins。 Main.less看起来像这样：

@import "less/bootstrap.less";
@import "jasny-variables.less";

@navmenu-width:    225px;

当我从Jasny Bootstrap实现'Off Canvas'组件时，它也可以正常工作;出现一个非画布菜单，并将所有内容推送到右侧。

当我尝试更改某些Jasny less变量时（通过将它们添加到我的main.less文件中[正如我上面所做的那样]，或者直接在{{1}中更改它们文件[jasny-variables.less从同一目录导入]），我没有看到任何结果。

具体来说，我试图将main.less的值更改为小于默认值。然而，无论我给它什么价值，在任何一个来源中，它都不会改变。

建议？

Answer 1

如果你想改变jasny-bootstrap LESS变量，你需要download it's source（那里有＆＃39; s＆＃34;下载zip＆＃34;右边那个按钮）并导入所有它＆＃39;将较少的文件放入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>

因为你在这里看不到bootstrap和jasny-bootstrap 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，之后您已将jasny-bootstrap.less包含在您的内容中，而其余的jasny .less文件可能包含{h}这是因为对变量的更改没有覆盖预渲染CSS中的定义。

包括bootstrap.less
包括jasny-bootstrap / variables.less - 定义jasny＆＃39; s vars
使用您的值覆盖变量标题
包含其余的jasny较少的代码来使用覆盖的变量并呈现将覆盖默认引导程序指令的新CSS指令。

jasny-bootstrap源码以及.less文件可以从这里下载： https://github.com/jasny/bootstrap

Jasny Bootstrap具有较少的预编译器 - 无法修改较少的变量

1 个答案: