Ich habe eine sehr einfache style.less Datei in meinem Projekt, und ich benutze bootstrap für eine saubere, responsive Design. So, hier gehen wir:
%Vor%Nun, wenn ich die Datei mit weniger kompiliere, sieht die CSS-Ausgabe seltsam aus:
%Vor%Er verdoppelt nur alles! Ich kann dieses seltsame Verhalten sogar im Browser direkt sehen, wenn ich an meiner devoluper-Instanz arbeite.
Das ist so seltsam und schrecklich, hat jemand eine Idee, warum das passiert? In den ursprünglichen less-files, die vom Bootstrap importiert werden, ist alles nur einmal definiert.
Hier sind zwei mögliche Lösungen. Sie scheinen beide offensichtlich zu sein, aber ich habe BEIDEN von ihnen manchmal übersehen ...
Sehen Sie die Duplikatstilregeln in der tatsächlich kompilierten CSS-Datei? ODER sehen Sie doppelte Regeln in den Entwickler-Tools von Firebug oder Chrome? Wenn es die zweite ist, gehen Sie zurück und stellen Sie sicher, dass Ihre CSS-Datei tatsächlich Duplikate hat.
Ich hatte das gleiche Duplikationsproblem während ich LESS benutzte, und ich konnte es nicht herausfinden, bis ich bemerkte, dass ich das css zweimal in <head> eingefügt hatte. Es ist ein dummer Fehler, aber ich habe es definitiv schon einmal gemacht.
Viel Glück.
Stellen Sie sicher, dass Sie die neueste Version von LESS verwenden.
Das Standardverhalten von @import war nicht sehr intelligent, wenn es mehrfach aus verschiedenen Dateien aufgerufen wurde.
Also wurde die Direktive @import-once eingeführt, um sicherzustellen, dass eine bestimmte weniger Datei nur einmal enthalten ist, egal wie viele Dateien sie benutzt hat.
Allerdings haben sie jetzt das @import-once -Verhalten zum Standard gemacht, auch wenn Sie nur @import verwenden.
Siehe auch: Was ist die LESS CSS-Anweisung? @ Import-einmal gut für?