MENOS importación de CSS y rutas relativas

Question

Estoy usando LESS para organizar e importar todos mis archivos CSS. También estoy usando Twitter Bootstrap, que integé dentro de mi style.less. Funciona bien como a continuación, sin embargo, cuando uso lessc para minimizar el archivo menos y comprimirlo en uno, todo se desata con mi twitter bootstrap css. La razón es que mi bootstrap.min.css tiene una ruta de acceso relativa a las imágenes como "../img" así que cuando minimizo todos estos archivos y vuelvo a mi archivo de salida, ya no encuentra esta ruta.

¿Cómo exactamente debería arreglar esto, no quiero ser código absoluto URLs absolutas en mi CSS?

style.less 
    @import './folder_one/file_one'; 
    @import './folder_one/file_two'; 
    @import './folder_two/file_one'; 
    @import './folder_three/file_one'; 
    // this bootstrap css references images relatively ../img/ 
    @import './bootstrap/bootstrap.min.css'; 

Answer 1

Consulte los documentos para el uso de la línea de comandos. https://github.com/cloudhead/less.js/wiki/Command-Line-Usage. Hay una opción llamada --root-path que antepondrá las direcciones URL existentes para que funcionen en el archivo css de salida.

lessc [option option=parameter ...] <source> [destination] 

lessc -rp=will/be/prepended sourcefile.less path/to/destination 

---

Por ejemplo:

Aquí está la URL original, con el archivo en css/src/nido

background-image: url('../../../imgs/bg.png'); 

Y esto es lo que yo haría en la línea de comandos . Tenga en cuenta que el argumento -rp debe apuntar desde el directorio de salida a la ubicación del archivo original

lessc -rp=src/nest css/src/nest/nesty.less css/nesty.less 

Y la salida, con el archivo en css/

background-image:url('src/nest/../../../imgs/bg.png') 

---

Hay una opción de --relative-urls , pero no puedo hacer que funcione. Estoy trabajando en el script de construcción que usa la solución que describí arriba. Build-o-Matic

Esta es la forma en que manejé determinar la trayectoria [link]

Answer 2

Cuando se ejecuta lessc usar la bandera --relative-urls.

lessc --relative-urls 

Está mal documentado, pero por defecto es falso lo que significa que todos los archivos @imported mantendrán sus URL (por ejemplo, Imagen de fondo, tipo de letra-cara, etc.) como son. Esto se debe a que menos ya estaba haciendo esto y muchos usuarios esperan que deje sus urls en paz.

Cuando se utiliza el indicador de urls relativas, lessc vuelve a escribir todas las direcciones URL de acuerdo con la ubicación del archivo less/css que se está importando.

Ejemplo

/dir1/style/main.less

// if you don't include (less) lessc will leave bootstrap 
// as an @import at the top of the lessified css file 
@import (less) '../bootstrap/bootstrap.min.css'; 

/dir1/lib/bootstrap/bootstrap.min.css

background-image:url("../img/bs-img.gif"); 

Resultado:

/dir1/style/main.css

background-image:url("../bootstrap/img/bs-img.gif"); 

Answer 3

--relative-urls bandera tiene su contraparte en el navegador.

<script> 
less = { 
    env: "development", 
    relativeUrls: true 
}; 
</script> 
<script src="less.min.js"></script>