MENOS fondo de CSS con la ruta relativa

Question

Tengo un problema cuando uso LESS como hoja de estilo para mi sitio web. Personalmente, prefiero usar una ruta relativa en CSS que una ruta absoluta (solo mi hábito), pero ahora cuando uso LESS con la función de importación, tengo un problema como el siguiente.

Tengo un archivo en la carpeta raíz main.less

@import "inc/inc.less"; 

y un archivo en la carpeta inc.lessinc

.homeBgr { 
    background: url('icons/Home.gif'); 
} 

la imagen Home.gif está en la carpeta /root/inc/icons

- main.less 
     - inc 
     - inc.less 
     - icons 
      - Home.gif 

con lessc salida es

.homeBgr { 
    background: url('icons/Home.gif'); 
} 

Sin embargo, mi expectativa es

.homeBgr { 
    background: url('inc/icons/Home.gif'); 
} 

Si uso less.js como compilador cliente, tengo la salida como se esperaba, sin embargo Si uso lessc, no lo hago.

¿Alguien ha tenido el mismo problema y tiene una solución para esto? O realmente, cualquier sugerencia sobre cómo hacer que esto funcione. Gracias por adelantado.

Answer 1

tiene que usar la función de escape de .less. Se verá algo como esto. firebug it o use chromes firebug para ver el camino si esto no funciona y necesita ajustarlo a una carpeta raíz. al menos puedes ajustarlo después de su escape.

background: ~"url('inc/icons/Home.gif')"; 

Answer 2

En lugar de tener main.less en las raíces y otras menos archivos en/inc, poner todos los archivos menos en una, "estilos" "css", o la carpeta "menos". Luego puede usar una ruta relativa consistente para las imágenes haciendo "../icons/home.gif"

Answer 3

La ruta de la imagen relativa se relaciona con el archivo CSS generado, no con el archivo LESS.