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

【问题标题】：Jasny Bootstrap with less pre-compiler - unable to modify less variables带有较少预编译器的 Jasny Bootstrap - 无法修改较少的变量
【发布时间】：2014-10-04 16:46:21
【问题描述】：

提前感谢您的阅读。

使用 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 文件运行良好；在导入 Jasny 集之前，我的 main.less 文件从 Bootstrap 导入所有 less 变量和 mixins。 Main.less 看起来像这样：

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

@navmenu-width:    225px;

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

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

具体来说，我正在尝试将@navmenu-width 的值更改为小于默认值。然而，无论我给它什么价值，在任何一个来源中，它都不会改变。

建议？

【问题讨论】：

标签： javascript css twitter-bootstrap less jasny-bootstrap

【解决方案1】：

如果您想更改 jasny-bootstrap LESS 变量，您需要 download it's source（右侧有“下载 zip”按钮）并将所有它的 less 文件导入您的 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 的链接，因为我们将其包含在下面的 less 中。

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，之后您在 less 中包含 jasny-bootstrap.less 而没有其余 jasny 的 .less 文件，这可能是对变量的更改没有覆盖的原因来自预渲染 CSS 的定义。

包括 bootstrap.less
包括 jasny-bootstrap/variables.less - 定义 jasny 的变量
用您的值覆盖变量
包含其余的 jasny 的 less 代码以使用覆盖的变量并呈现将覆盖默认引导指令的新 CSS 指令。

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

【讨论】：

我已经下载了bootstrap.less 文件目录并在我的main.less 文件中导入jasny-variables.less 之前将其导入。从那里我完全按照你所说的做了，但仍然没有运气。我将编辑我的原始帖子以向您展示我的意思。
如果您的 main.less 中包含这些 bootstrap.less 和 jasny-bootstrap.less 文件，那么您不需要将 cdn CSS 版本包含到您的 html 文件中。
我很困惑。如果我不包含 Jasny 的 CDN CSS 库，那么 off canvas 组件将不起作用。我尝试删除 bootstrap.css 导入，但这似乎不会导致问题。
感谢您与我合作。我确实尝试了您提到的内容，但是如果我从标题中删除 Jasny CSS 文件，则响应性将无法正常工作：关闭画布菜单根本不显示。但是 - 我还没有从 Jasny 导入您指出的其他 *.less 文件。请问你在哪里找到的？
是的，在您导入它们之前它不会起作用。它们可以从这里下载：github.com/jasny/bootstrap :)