Die perfekte Übereinstimmung zwischen Node.js und LESS

LESS ist eine großartige Möglichkeit, CSS zu schreiben und ermöglicht Ihnen die Verwendung von Variablen, verschachtelten Regeln, Mixins und vielen anderen nützlichen Funktionen, die Ihnen dabei helfen können, Ihren CSS-Code besser zu organisieren.
Ich habe mich kürzlich mit Node.js beschäftigt und wollte Middleware mit weniger Middleware verwenden, damit ich LESS problemlos in meiner Anwendung verwenden kann. Nach der Konfiguration kann LESS-Middleware Ihren LESS-Code automatisch in CSS-Code kompilieren.

Wenn Sie LESS- und CSS-Dateien im selben Verzeichnis speichern, ist die Konfiguration einfach, aber ich möchte unterschiedliche Pfade für mein Quellverzeichnis und Zielverzeichnis verwenden, hier gibt es ein kleines Problem, also hier, Ich dachte, ich würde die gefundenen Probleme dokumentieren.
Wenn Sie ein anderes „src“- und „dest“-Verzeichnis angeben, müssen Sie auch die Option „prefix“ angeben, die mit dem Verzeichnis nach Ihrem Zielverzeichnis übereinstimmen muss. Hier ist ein Beispiel zum besseren Verständnis:

var  lessMiddleware = require("less-middleware");
app.use(lessMiddleware({
    src: __dirname + "/less",
    dest: __dirname + "/public/css",
    prefix: "/css",
    force: true
}));
app.use(express.static(__dirname + "/public"));

In diesem Beispiel habe ich das Quellverzeichnis als „/less“-Verzeichnis unter dem Stammverzeichnis meiner Anwendung konfiguriert und das CSS in das Verzeichnis „/public/css“ ausgegeben werden. Darüber hinaus müssen Sie auch das Attribut „prefix“ angeben, damit es mit dem Verzeichnis nach „/public“ übereinstimmt, also dem Verzeichnis „/css“.
Sie können auch Geben Sie andere Parameter an. Der Force-Parameter ist oben angegeben, sodass die LESS-Datei bei jeder Anforderung neu kompiliert werden kann, kombiniert mit der automatischen Aktualisierungsfunktion, sodass Änderungen am Stilcode während der Entwicklung sofortige Auswirkungen haben können. Die CSS-Datei ist auf der Seite angegeben. Es ist die gleiche wie normal:

<link rel="stylesheet", type="text/css", href="css/styles.css">

Als dieser Artikel veröffentlicht wurde, wurde less-middleware auf Version 1.0.3 aktualisiert 0.1.x. Das Folgende ist: Lassen Sie mich vorstellen, wie Sie von 0.1.x auf 1.0.x migrieren.

Zunächst gibt es eine wichtige Änderung – die Änderung des Quellverzeichnisparameters, der zuvor im Optionsparameter platziert wurde , wie folgt:

lessMiddleware({
  src: path.join(__dirname, '/public')
})

Da das Quellverzeichnis ein erforderlicher Parameter ist, wird es nach dem Upgrade als erster Parameter der Middleware verwendet, wie folgt:

lessMiddleware(path.join(__dirname, '/public'))

Die zweite Änderung ist die Trennung von Middleware-Parametern und LESS-Parametern. Auf diese Weise ist die Parameterstruktur klarer, wie folgt:

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

Der Optionsparameter wird bereitgestellt Middleware und die letzten beiden Parameterobjekte haben keinen Einfluss auf die Middleware und werden zur Analyse und Kompilierung an LESS übergeben. Nach dieser Anpassung muss auch die entsprechende Parameterdefinitionsmethode entsprechend angepasst werden:

Komprimierung: aus Optionen entfernt, muss in CompilerOptions definiert werden;
dumpLineNumbers: aus Optionen entfernt, muss in ParserOptions definiert werden; 🎜>Pfade: aus Optionen entfernt, müssen in parserOptions definiert werden;
Präprozessor: Wurde zur Definition nach preprocessor.less verschoben;
relativeUrls: aus Optionen entfernt, muss in parserOptions definiert werden; : aus Optionen entfernt, muss in CompilerOptions definiert werden;
yuicompress: aus Optionen entfernt, muss in CompilerOptions definiert werden; Die dritte Änderung besteht darin, dass ein neuer Parameter hinzugefügt wurde und das Präfix und die TreeFunctions Parameter wurden entfernt, sodass Sie es flexibler konfigurieren können, wie folgt:
postprocess.css: Ändern Sie vor dem Speichern die CSS-Kompilierungsausgabe.
preprocess.less: Ändern Sie LESS, bevor sie analysiert und kompiliert wird.
preprocess.path: Ändern Sie den LESS-Pfad, bevor er vom Dateisystem geladen wird.
Damit kann für mehrere Parameter die Funktion, die wir zuvor mithilfe des Präfixes implementiert haben, verwendet werden, um den gleichen Effekt auf folgende Weise zu erzielen:

Das obige ist der detaillierte Inhalt vonDie perfekte Übereinstimmung zwischen Node.js und LESS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!