Menu
I have broken it down to it simplest form but still cannot find out why this is not working. All files resolve and the imports in Bootstrap are loaded yet, the styles aren't loaded.
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>
I made a simple style.less which works fine! Am I missing something glaringly obvious ?
Update:
style.less as requested by Todd :
@primary_color: green;
h1 {
color: @primary_color;
}
754
Update 3/5/2012: The Bootstrap guys have fixed this problem in version 2.0.2 of Bootstrap (not yet released). See this commit.
The underlying bug is that the present version of less.js doesn't allow you to use a variable for for the url() value directly (e.g. url(@iconWhiteSpritePath)) -- instead you have to use string interpolation (e.g. url("@{iconWhiteSpritePath}")), which accomplishes the same thing. The bootstrap guys just updated their syntax to take this quirk into account.
Original Answer
I ran into the exact problem today and figured out the cause of it. Since your stack is a few versions before mine (I'm using Bootstrap 2.0 and less.js 1.2.2) I can't be sure it's the same issue, but it's possibly related.
Anyhow, the problem for me was that Twitter Bootstrap is defining some variables:
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
And then using them directly in the url() value for a background-image in 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);
}
Per the discussion in this Github issue that's causing a major problem. When less.js chokes on this value, the whole compilation fails.
The good news is there is a fix in that issue, provided by csnover. Just change this line in tree.URL:
if (typeof(window) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {
to
if (typeof(window) !== 'undefined' && typeof(val.value) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {
and you should be set. In other words, we just ensure that val.value is set so that that charAt() doesn't choke on an undefined.
Hopefully this fix will be committed to the project soon and Bootstrap will work with less.js in the browser environment out of the box.
70
If you are developing this locally, make sure that the browser is using the correct protocol. It should display http: in the address bar, not file:.
On my Windows 7 machine using Chrome (with a XAMPP setup), I was having the same CSS problem using less.js with Bootstrap when accessing the .html file at:
file:///C:/xampp/htdocs/index.html
However, it did render properly via http at:
http://localhost/index.html
Not certain why, but I imagine that less.js relies on HTTP headers.
2
for me worked
[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);
}
so replace
url(@iconSpritePath);
with
url(../img/glyphicons-halflings.png);
on less.js v1.2.1 and Bootstrap v2.0.1
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
