16

我已将其分解为最简单的形式，但仍然无法找出为什么这不起作用。所有文件都已解析，并且 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 效果很好！我错过了一些明显的东西吗？

更新：

托德要求的 style.less ：

@primary_color: green;

h1 {
    color: @primary_color;
}
4

4 回答 4

6

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";

然后在 sprites.less 中的背景图像的 url() 值中直接使用它们：

[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 一起使用。

于 2012-02-17T19:38:43.663 回答
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 标头。

于 2011-11-15T02:49:39.597 回答
1

对我来说工作

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

在 less.js v1.2.1 和 Bootstrap v2.0.1 上

于 2012-02-23T00:40:26.133 回答
0

是你文件结构的问题吗？ /less/bootstrap/1.4.0/bootstrap.less无论您的 html 文件如何，都将指向您的域的根目录。

如果您使用 apache 托管并且您具有以下项目结构：

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

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

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

于 2011-11-15T03:44:57.103 回答