LESS & Bootstrap 无法编译答案

【问题标题】：LESS & Bootstrap Wont CompileLESS & Bootstrap 无法编译
【发布时间】：2014-11-05 05:00:00
【问题描述】：

我对 LESS 很陌生，但我认为我的想法是正确的。但是，我无法编译 LESS。我现在已经下载了 3 个编译器（Crunch、Simpless、Winless）。

紧缩我得到一个错误

Compiler Errors variable @navbar-default-bg is undefined (Line: 15)

WinLESS - 我得到“成功”，但没有看到任何 CSS 生成。

简单 - 只是不构建或错误。什么都没发生。

这就是我正在做的事情。我有蔚蓝引导模板http://bootswatch.com/cerulean/。您可以下载 bootswatch.less 和 variables.less 我正在对它们进行 ZERO 修改。根据我对其工作原理（和最佳实践）的理解，我将我的 CSS 和 less 文件导入到一个 less 文件中，然后编译 LESS 并将 CSS 移动到我在我的 asp.net 页面中引用的一个 CSS 中。我称这个文件为“IMSLess.less”，看起来像这样......

@import "bootstrap.min.css";            // xxxxxxxxxx
@import "variables.less";               // xxxxxxxxxx
@import "bootswatch.less";              // xxxxxxxxxx

导入 bootstrap.min.css 模板，后跟 2 个UNEDITED 文件。就像我说的我在这方面很新，所以我可能设置不正确，这可能会导致我的错误，但希望有人能提供帮助！

谢谢乔什

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案1】：

诀窍在于无需复制文件或重新添加 @import 即可轻松更新 Bootstrap。

下载 Bootstrap 源文件并保持原样。
从 Bootswatch 下载这两个文件（variables.less 和 bootswatch.less) 并将它们放在自己的目录中
在同一个目录下，新建一个less文件。名字给它一个名字像 custom-bootstrap.less 并添加如下内容：

@import "../bootstrap/less/bootstrap"; @import "bootswatch"; @import "变量";
编译 custom-bootstrap.less 并在您的 html 中使用该 css 文件。

那么当你升级Bootstrap的时候，你只需替换bootstrap源文件，重新编译custom-bootstrap.less即可。

来源：http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/（文章显然是由 Bootswatch 的创建者撰写的）

【讨论】：

【解决方案2】：

我不使用 Bootswatch，所以我可能是错的，但我认为它是这样工作的......

bootstrap.css / bootstrap.min.css = 从 Bootswatch 和 Bootstrap 编译的文件更少。如果您不更改任何 LESS 变量，这就是您所需要的，它们是独立的。

variables.less / bootswatch.less = Bootswatch 更改的变量/css，这些用于补充原始 Bootstrap LESS 文件。要使用这些，您需要编译它们以及您需要从 Bootstrap（而不是 Bootswatch）下载的 Bootstrap LESS 文件。

欲了解更多信息，请查看：

Bootstrap: Using Less

Bootstrap: Compiling CSS and JavaScript

【讨论】：

感谢@JoshHunt，这帮助我找到了正确的方向。 "min" 只是 css 的缩小版 - minifycss.com
是的，对不起，我应该澄清一下。我假设你知道那是什么（错误的假设）。 “.min”在很多网络文件中使用，以表明它是经过压缩的，所以知道它是一件好事。

【解决方案3】：

所以我这里做的是抓取bootstrap的源代码。 (http://getbootstrap.com/)。然后我使用了我的 Bootswatch 模板 (http://bootswatch.com/cerulean/) 中的 2 个 bootswatch 少文件。 Bootswatch 网站将拥有自己的“variables.less”版本。我从源头覆盖了“variables.less”。然后在 boostrap.less 我添加了 bootswatch.less 的引用。

@import "bootswatch.less";

然后我使用 Crunch (http://crunchapp.net/) 编译 ONLY bootstrap.less 文件。当您“处理” bootstrap.less 文件时，您最终会得到一个在您的站点中引用的 boostrap.css 文件。当然，您可以更改 variables.less 文件以满足您的需要。

巨大的警告，我无法让它与 SimpLESS 或 WinLess 编译器一起工作，不知道为什么，但 Crunch 是唯一有效的。

希望这对其他人有所帮助！

谢谢乔什

【讨论】：