Twitter Bootstrap no funciona con less.js

Lo he descompuesto en su forma más simple, pero todavía no puedo descubrir por qué esto no funciona. Todos los archivos se resuelven y las importaciones en Bootstrap se cargan aún, los estilos no se cargan.Twitter Bootstrap no funciona con less.js

de arranque 1.4.0 menos 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>

hice un style.less simple que funciona bien! ¿Me estoy perdiendo algo obvio?

Actualización:

style.less conforme a lo solicitado por Todd:

@primary_color: green; 

h1 { 
    color: @primary_color; 
}

Fuente

2011-11-11 briangallagher

Se puede publicar su style.less? – Todd

@Todd actualizó la publicación. El style.less funciona bien sin embargo. – briangallagher

¿muestra la hoja de estilos cargada/procesada dentro de la consola? –

Si está desarrollando este local, asegúrese de que el navegador está usando el protocolo correcto. Debería mostrar http: en la barra de direcciones, no el archivo :.

En mi máquina de Windows 7 usando Chrome (con una configuración de XAMPP), que estaba teniendo el mismo problema usando CSS less.js con Bootstrap al acceder al archivo .html en:

file:///C:/xampp/htdocs/index.html

Sin embargo, lo hizo representan correctamente a través de http en:

http://localhost/index.html

No es seguro por qué, pero me imagino que less.js se basa en las cabeceras HTTP.

Fuente

2011-11-15 02:49:39 joelhaus

¿Es el problema con la estructura de su archivo? /less/bootstrap/1.4.0/bootstrap.less apuntará a la raíz de su dominio independientemente de su archivo html.

Si usted es anfitrión con Apache y que tienen la siguiente estructura del proyecto:

www/ 
    your project/ 
     less/ 
     index.html 
    another project/ 
    others/

Al acceder a index.html de http://localhost, se buscará el archivo desde la raíz lessdominio que es www/ . Por lo tanto, como no hay ninguna carpeta less debajo de este directorio raíz, se devolverá como 404 (no encontrado).

Por lo tanto, la solución es utilizar la URL relativa para sus archivos menos. Si tiene la estructura anterior, elimine el '/' y use less/bootstrap/1.4.0/bootstrap.less en su lugar.

Fuente

2011-11-15 03:44:57 steveyang

desafortunadamente este no es el problema. La aplicación está en un host virtual y todos los css/less son seguros para la raíz del domian. Todos los archivos se están resolviendo correctamente, incluso en la medida en que se importan menos archivos. – briangallagher

Actualización 3/5/2012: Los chicos de Bootstrap han solucionado este problema en la versión 2.0.2 de Bootstrap (aún no publicada). Ver this commit.

El error subyacente es que la versión actual de less.js no le permite utilizar una variable para la url() valor directamente (por ejemplo url(@iconWhiteSpritePath)) - en lugar usted tiene que utilizar la interpolación de cadenas (por ejemplo url("@{iconWhiteSpritePath}")) , que logra lo mismo. Los chicos de bootstrap simplemente actualizaron su sintaxis para tener en cuenta esta peculiaridad.

respuesta original

me encontré con el problema exacto y hoy cuenta de la causa de la misma.Dado que tu stack está en algunas versiones antes que la mía (estoy usando Bootstrap 2.0 y less.js 1.2.2) no puedo estar seguro de que sea el mismo problema, pero posiblemente esté relacionado.

De todos modos, el problema para mí fue que Twitter Bootstrap es definir algunas variables:

@iconSpritePath:   "../img/glyphicons-halflings.png"; 
@iconWhiteSpritePath:  "../img/glyphicons-halflings-white.png";

Y luego usarlos directamente en el valor url() para una imagen de fondo en 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);

}

por la discusión en this Github issue que está causando un problema importante. Cuando less.js se ahoga en este valor, la compilación completa falla.

La buena noticia es que hay una solución a ese problema, proporcionada por csnover. Sólo cambia esta línea en 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) {

y que debe ser fijado. En otras palabras, solo nos aseguramos de que val.value esté configurado para que charAt() no se ahogue en un valor indefinido.

Esperemos que este arreglo se confirme pronto en el proyecto y Bootstrap trabajará con less.js en el entorno del navegador de fábrica.

Fuente

2012-02-17 19:38:43 jsdalton

Esto funcionó para mí, pero tenga en cuenta que esto solo funciona para la versión completa de less.js (disponible aquí: https://github.com/cloudhead/less.js), no la versión que descarga de su sitio web. – feldoh

para mí trabajaron

[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); 
}

por lo reemplace

url(@iconSpritePath);

con

url(../img/glyphicons-halflings.png);

en less.js v1.2.1 y v2.0.1 Bootstrap

Fuente

2012-02-23 00:40:26 maxx

Me encontré con el mismo problema exacto. Tu solución funciona para mí ¡Gracias! – Abe

@Abe tenga cuidado, no funciona de esa manera: use la nueva solución – maxx

Twitter Bootstrap no funciona con less.js

Respuesta

Cuestiones relacionadas