Question

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

bootstrap 1.4.0 少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版本中修复了这个问题（尚未发布）。请参阅this commit。

潜在的错误是，less.js的当前版本不允许您直接使用变量for 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中的背景图像：

[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);

}

根据this Github issue中引起重大问题的讨论。当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：，而不是文件。

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

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

但是，它确实通过http：

正确呈现

http://localhost/index.html

不确定原因，但我认为less.js依赖于HTTP标头。

Answer 3

为我工作

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

  .ie7-restore-right-whitespace();
}
.icon-white {
  background-image: url(../img/glyphicons-halflings-white.png);
}

所以替换

url(@iconSpritePath);

与

url(../img/glyphicons-halflings.png);

on less.js v1.2.1和Bootstrap v2.0.1

Answer 4

你的文件结构有问题吗？无论您的html文件是什么，/less/bootstrap/1.4.0/bootstrap.less都会指向您域名的根目录。

如果您使用apache进行托管，并且您拥有以下项目结构：

www/
    your project/
        less/
        index.html
    another project/
    others/

当您从http://localhost访问index.html时，它会从域根 less中查找www/文件。因此，由于此根目录下没有less文件夹，因此它将返回404（未找到）。

因此，解决方案是使用相对URL来处理较少的文件。如果您具有上述结构，请删除“/”并改为使用less/bootstrap/1.4.0/bootstrap.less。

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

4 个答案: