LESS importieren CSS und relative Pfade

Ich benutze LESS, um alle meine CSS-Dateien zu organisieren und zu importieren. Ich benutze auch Twitter Bootstrap, die ich in meinem style.less integriert habe. Es funktioniert gut wie unten, aber wenn ich lessc verwende, um die weniger Datei zu verkleinern und zu einem zu komprimieren, bricht die Hölle mit meinem Twitter Bootstrap css los. Der Grund ist, dass mein bootstrap.min.css einen relativen Pfad zu Bildern wie "../img" hat. Wenn ich also alle diese Dateien verkleinere und meine Ausgabedatei ablege, findet sie diesen Pfad nicht mehr.LESS importieren CSS und relative Pfade

Wie genau soll ich das beheben, ich möchte nicht absolute URLs in meinem CSS festcodieren?

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';

Quelle

2012-10-10 user391986

Ich empfehle Ihnen, '. Htaccess 'dafür zu verwenden. –

Überprüfen Sie die Dokumentation für die Befehlszeile. https://github.com/cloudhead/less.js/wiki/Command-Line-Usage. Es gibt eine Option namens --root-path, die vorhandenen URLs vorangestellt wird, so dass sie in der Ausgabe-CSS-Datei funktionieren.

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

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

Zum Beispiel:

Hier ist die ursprüngliche URL, mit der Datei in css/src/Nest

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

Und das ist, was ich auf der Kommandozeile tun würde . Beachten Sie, dass das -rp Argument aus dem Ausgabeverzeichnis auf den ursprünglichen Speicherort der Datei in css/

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

Es gibt eine --relative-urls Option

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

und die Ausgabe, mit der Datei anweisen , aber ich kann es nicht zur Arbeit bringen. Ich arbeite Build-Skript, das die oben beschriebene Problemumgehung verwendet. Build-o-Matic

Dies ist, wie ich behandelt den Weg zu bestimmen [link]

Quelle

2013-04-05 21:09:31

Versuchen Sie es mit relativen Pfaden, fügen Sie flag -ru oder --relative-urls hinzu, es funktionierte in meinem Fall (mit lessc 1.4.0). – user1

Rechts. Ich habe das erwähnt. Der Grund für diese Problemumgehung ist, dass die Option -ru nicht funktionierte –

Wenn lessc die --relative-urls Flag verwenden, ausgeführt wird.

lessc --relative-urls

Es ist schlecht dokumentiert, aber es ist falsch standardmäßig, was bedeutet, dass alle @imported Dateien ihre URLs beibehalten werden (zum Beispiel Hintergrund-Bild, font-face, usw.), wie sie sind. Der Grund dafür ist, dass weniger bereits dies getan hat und viele Nutzer erwarten, dass sie ihre URLs in Ruhe lassen.

Wenn das Flag relative-urls verwendet wird, schreibt lessc alle URLs entsprechend dem Speicherort der importierten less/css-Datei neu.

Beispiel

/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");

Ergebnis:

/dir1/style/main.css

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

Quelle

2014-06-04 21:31:29 Planky

-1

--relative-urls Flag hat seine In-Browser-Gegenstück.

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

Quelle

2017-01-27 09:21:02 sanmai

LESS importieren CSS und relative Pfade

Antwort

Verwandte Themen