Twitter Bootstrap不能与less.js一起使用

Question

我把它分解成最简单的形式,但仍然无法找出为什么这不起作用.解析所有文件并加载Bootstrap中的导入,但不加载样式.

bootstrap 1.4.0 less 1.1.3

<html>
    <head>
        <title>ahhhhhh...</title>

        <link rel="stylesheet/less" href="/less/bootstrap/1.4.0/bootstrap.less">
        <script src="/less/less-1.1.3.min.js"></script>

    </head>
    <body>

        <h1>WTF!!!</h1>

    </body>
</html>

我做了一个简单的style.less工作正常!我错过了一些明显的东西吗？

更新:

没有托德所要求的那种风格:

@primary_color: green;

h1 {
    color: @primary_color;
}

Answer 1

2012年3月5日更新:Bootstrap家伙已经在Bootstrap 2.0.2版本中修复了这个问题(尚未发布).看到这个提交.

底层的错误是,less.js的当前版本不允许你直接使用变量为url()值(例如url(@iconWhiteSpritePath)) - 而是你必须使用字符串插值(例如url("@{iconWhiteSpritePath}")),它完成同样的事情.引导员刚刚更新了他们的语法以考虑这个怪癖.

原始答案

我今天遇到了确切的问题,并找出了原因.由于你的堆栈是我之前的几个版本(我使用的是Bootstrap 2.0和less.js 1.2.2)我不能确定它是同一个问题,但它可能是相关的.

无论如何,对我来说问题是Twitter Bootstrap正在定义一些变量:

@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

然后直接在url()值中使用它们为sprites.less中的background-image:

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url(@iconSpritePath);
  background-position: 14px 14px;
  background-repeat: no-repeat;

  .ie7-restore-right-whitespace();
}
.icon-white {
  background-image: url(@iconWhiteSpritePath);

}

根据这个Github问题的讨论引起了一个重大问题.当less.js对此值进行阻塞时,整个编译将失败.

好消息是csnover提供了该问题的解决方案.只需在tree.URL中更改此行:

    if (typeof(window) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {

至

    if (typeof(window) !== 'undefined' && typeof(val.value) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {

你应该被设定.换句话说,我们只是确保设置val.value,以便charAt()不会在未定义时阻塞.

希望这个修复程序很快将提交给项目,Bootstrap将在浏览器环境中与less.js一起使用.

Answer 2

如果您在本地进行开发，请确保浏览器使用正确的协议。它应该在地址栏中显示http: ，而不是file:。

在我使用 Chrome 的 Windows 7 机器上（使用 XAMPP 设置），在访问 .html 文件时，我在 Bootstrap 中使用 less.js 时遇到了同样的 CSS 问题：

file:///C:/xampp/htdocs/index.html

然而，它确实通过 http 正确呈现：

http://localhost/index.html

不知道为什么，但我想 less.js 依赖于 HTTP 标头。