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;
}
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;
}
4 Answers
Reset to default 6Update 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.
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.
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
Is it the problem with your file structure?
/less/bootstrap/1.4.0/bootstrap.less will point to the root of your domain regardless of your html file.
If you are hosting with apache and you have the following project structure:
www/
your project/
less/
index.html
another project/
others/
When you access index.html from http://localhost, it will look up the less file from the domain root which is www/. Thus as no less folder is under this root directory, it will returned as 404 (not found).
So, the solution is to use relative url for your less files. If you have the above structure, remove the '/' and use less/bootstrap/1.4.0/bootstrap.less instead.
h1 { color: green; }but yet you don't see the h1 element green? – Manuel van Rijn Commented Nov 11, 2011 at 15:17