Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Update 3/5/2012</strong>: The Bootstrap guys have fixed this problem in version 2.0.2 of Bootstrap (not yet released). See <a href="https://github.com/twitter/bootstrap/commit/c900d72857e5c3865abe9502ad7d255e84f1af0e" rel="nofollow">this commit</a>.</p> <p>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. <code>url(@iconWhiteSpritePath)</code>) -- instead you have to use string interpolation (e.g. <code>url("@{iconWhiteSpritePath}")</code>), which accomplishes the same thing. The bootstrap guys just updated their syntax to take this quirk into account.</p> <p><strong>Original Answer</strong></p> <p>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.</p> <p>Anyhow, the problem for me was that Twitter Bootstrap is defining some variables:</p> <pre><code>@iconSpritePath: "../img/glyphicons-halflings.png"; @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; </code></pre> <p>And then using them directly in the url() value for a background-image in sprites.less:</p> <pre><code>[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); </code></pre> <p>}</p> <p>Per the discussion in <a href="https://github.com/cloudhead/less.js/issues/190" rel="nofollow">this Github issue</a> that's causing a major problem. When less.js chokes on this value, the whole compilation fails.</p> <p>The good news is there is a fix in that issue, provided by csnover. Just change this line in tree.URL:</p> <pre><code> if (typeof(window) !== 'undefined' &amp;&amp; !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) &amp;&amp; paths.length &gt; 0) { </code></pre> <p>to</p> <pre><code> if (typeof(window) !== 'undefined' &amp;&amp; typeof(val.value) !== 'undefined' &amp;&amp; !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) &amp;&amp; paths.length &gt; 0) { </code></pre> <p>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.</p> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload