loop - sass css

MENOS importar CSS y rutas relativas

Question

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

¿Cómo exactamente debo solucionar esto, no quiero estar codificando las URL 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

Cuando ejecutes lessc usa la bandera --relative-urls .

lessc --relative-urls

Está mal documentado, pero por defecto es falso, lo que significa que todos los archivos importados @ mantendrán sus URL (por ejemplo, imagen de fondo, fuente, etc.) tal como están. Esto se debe a que menos ya lo estaba haciendo y muchos usuarios esperan que deje sus direcciones URL en paz.

Cuando se utiliza el indicador de URL relativas, lessc vuelve a escribir todas las 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 2

Echa un vistazo a la documentación 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 antepone las 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 / nest

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

Y esto es lo que 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 --relative-urls , pero no puedo hacer que funcione. Estoy trabajando en un script de compilación que usa la solución que describí anteriormente. Build-o-Matic

Así es como manejé determinando la ruta [link]

Answer 3

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

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