我已将其分解为最简单的形式,但仍然无法找出它不起作用的原因。所有文件都已解析并且 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/