javascript - Twitter Bootstrap 不支持 less.js

标签 javascript css less twitter-bootstrap

我已将其分解为最简单的形式,但仍然无法找出它不起作用的原因。所有文件都已解析并且 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,效果很好!我是否漏掉了一些明显的东西?

更新:

托德要求的 style.less :

@primary_color: green;

h1 {
    color: @primary_color;
}

最佳答案

更新 3/5/2012:Bootstrap 人员已在 Bootstrap 2.0.2 版(尚未发布)中修复此问题。参见 this commit .

潜在的错误是 less.js 的当前版本不允许您直接为 url() 值使用变量(例如 url(@iconWhiteSpritePath))——相反你必须使用字符串插值(例如 url("@{iconWhiteSpritePath}")),它完成同样的事情。 bootstrap 人员刚刚更新了他们的语法以考虑到这个怪癖。

原始答案

我今天遇到了确切的问题并找出了它的原因。由于您的堆栈比我的版本早几个版本(我使用的是 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);

根据 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。

关于javascript - Twitter Bootstrap 不支持 less.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8095499/

相关文章:

javascript - 盒式磁带的替代品?

CSS 在均匀分布的网格中布置元素列表

评论中的变量较少

regex - 在 LESS 中使用正则表达式

javascript - 如何通过管道流以在 hapi.js 中回复

javascript - 使用外部 JavaScript 库的 WebStorm 自动完成

javascript - 帧中的动画持续时间是什么意思?

javascript - 使用javascript修改onclick链接