Less.js: less.render funktioniert nicht mit @import-Dateien, die sich in verschiedenen Verzeichnissen in nodejs befinden

Erstellt am 17. Dez. 2014 · 2Kommentare · Quelle: less/less.js

Ich habe LESS verwendet, um Theming in meiner Anwendung zu implementieren und das Modul nodejs less zu verwenden, um weniger Dateien in CSS zu kompilieren, aber in einem bestimmten Szenario funktioniert es nicht.

Ich verwende auch Bootstrap für meine Anwendung und verwende Bootstrap weniger Quellcode. Ich kompiliere nur das CSS, das ich in meiner Anwendung haben möchte.

Ich kann auch Bootstrap-Variablen und Mixins in meinen verschiedenen Designs überschreiben. Beim Kompilieren von Bootstrap muss ich also auch bestimmte Themenvariablen und Mixins berücksichtigen.

Unterscheiden Sie also Bootstrap-Variablen / Mixins und CSS-Regeln Ich habe 2 verschiedene Dateien erstellt,

application_variables.less - Es enthält alle erforderlichen Bootstrap-Variablen und Mixins
application.less - Es enthält alle erforderlichen Bootstrap-CSS-Regeln

Verzeichnisstruktur Für die Anwendung

|--sample_application
    |--resources
    |   |--libraries
    |      |--bootstrap
    |           |--css
    |           |   |--application.less
    |           |--less
    |           |   |--application_variables.less    
    |--themes
        |--red
        |   |--mixins
        |   |   |--mixins.less
        |   |--variables
        |   |   |--variables.less    
        |   |--red.less    
        |--blue
        |   |--mixins
        |   |   |--mixins.less
        |   |--variables
        |   |   |--variables.less    
        |   |--blue.less    
        |--themes.less

Erklärung, welche Datei was enthält?

1. /sample_application/themes/<-theme_name->/mixins/mixins.less
Diese Datei enthält alle anwendungsspezifischen Mixins und überschriebenen Bootstrap-Mixins.

.my-hover-mixin(@color) {
   &:hover {
       border: 2px solid @color;
    }
}
/*Other theme specific mixins*/

2. /sample_application/themes/<-theme_name->/variables/variables.less
Diese Datei enthält alle anwendungsspezifischen Variablen und überschriebenen Bootstrap-Variablen.

@text-color:#333333;
@border-color:#999999;
@body-bg-color:red;
/*Other theme specific variables*/

3. /sample_application/themes/<-theme_name->/<-theme_name->.less
Diese Datei enthält Dateiimporte von Mixins und Variablen für dieses spezielle Thema.

<strong i="10">@import</strong> "./variables/variables.less";
<strong i="11">@import</strong> "./mixins/mixins.less";

4. /sample_application/themes/theme.less
Diese Datei enthält zwei Dateiimporte. Die erste für Bootstrap-Variablen, die application_variables.less ist, und die zweite für den Basisdateiimport bestimmter Themen, z. rot.weniger/blau.weniger

<strong i="17">@import</strong> "application_variables.less";
<strong i="18">@import</strong> "red/red.less";

5. /sample_application/resources/libraries/bootstrap/css/application.less
Diese Datei enthält einen Dateiimport, der /themes/themes.less ist, und alle erforderlichen Bootstrap-CSS-Regeln.

<strong i="24">@import</strong> "theme.less";
/*Bootstrap CSS rules*/

6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
Diese Datei enthält alle erforderlichen Bootstrap-Variablen und Mixins.

/*Bootstrap variables and mixins*/

Jetzt habe ich eine Knotenskriptdatei, die die Bootstrap-weniger Kompilierung dosiert, die compilieren-bootstrap.js ist

var fs = require("fs");
var less = require('less');

(function() {
    var bsLessContent = fs.readFileSync("sample_application/resources/libraries/bootstrap/css/application.less");
    less.render(bsLessContent.toString(), {
        paths : [ "sample_application/themes/", "sample_application/resources/libraries/bootstrap/less/"],
        compress : true
    }, function(e, output) {
        fs.writeFileSync("sample_application/resources/libraries/bootstrap/css/application.css", output);
    });
})();

Aber wenn ich dieses Skript ausführe, erhalte ich folgende Fehlermeldung

{ [Error: 'application_variables.less' wasn't found]
   type: 'File',
   message: '\'application_variables.less\' wasn\'t found',
   filename: 'sample_application\\themes\\theme.less',
   index: 18,
   line: 2,
   callLine: NaN,
   callExtract: undefined,
   column: 0,
   extract:
    [ '<strong i="6">@import</strong> "application_variables.less";',
      '<strong i="7">@import</strong> "red/red.less";' ] }

Dann habe ich auch versucht, relative Pfade zu verwenden, aber es gibt immer noch den gleichen Fehler

{ [Error: './../resources/libraries/bootstrap/less/application_variables.less' wasn't found]
   type: 'File',
   message: '\'./../resources/libraries/bootstrap/less/application_variables.less\' wasn\'t found',
   filename: 'sample_application\\themes\\theme.less',
   index: 18,
   line: 2,
   callLine: NaN,
   callExtract: undefined,
   column: 0,
   extract:
    [ '<strong i="11">@import</strong> "./../resources/libraries/bootstrap/less/application_variables.less";',
      '<strong i="12">@import</strong> "red/red.less";' ] }

Quelle

Virbhadrasinh

Hilfreichster Kommentar

Beachten Sie, dass Sie, da die Quelle dem Compiler als String bereitgestellt wird, den ursprünglichen Dateipfad explizit festlegen müssen, damit der Compiler ihn als Basis für Importe verwenden kann angeben sind relativ zu (höchstwahrscheinlich wird es nur cwd aber es ist ziemlich "zufällig" zu dem Zeitpunkt, an dem es tatsächlich zu Importen kommt, und es zeigt nicht mehr unbedingt auf Ihr Projektstammverzeichnis...). Z.B:

var fs   = require('fs'),
    path = require('path'),
    less = require('less');

(function() {
    var src = "foo/bar/baz.less";
    less.render(fs.readFileSync(src).toString(), {
        filename: path.resolve(src), // <- here we go
    }, function(e, output) {
        console.log(output.css);
    });
})();

Das gleiche gilt für die Option paths , wenn ich mich in diesem Fall nicht irre, sollten sie entweder absolut oder relativ zu filename . Im Allgemeinen ist es eine gute Idee zu lernen, wie lessc selbst mit diesen Dingen umgeht.

seven-phases-max am 19. Dez. 2014

👍18 🎉5 ❤4

Alle 2 Kommentare

var fs   = require('fs'),
    path = require('path'),
    less = require('less');

(function() {
    var src = "foo/bar/baz.less";
    less.render(fs.readFileSync(src).toString(), {
        filename: path.resolve(src), // <- here we go
    }, function(e, output) {
        console.log(output.css);
    });
})();

seven-phases-max am 19. Dez. 2014

👍18 🎉5 ❤4

Dank sieben-Phasen-max. Diese Lösung funktioniert gut und schließt das Problem.

Virbhadrasinh am 19. Dez. 2014

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Less.js: less.render funktioniert nicht mit @import-Dateien, die sich in verschiedenen Verzeichnissen in nodejs befinden

Hilfreichster Kommentar

Alle 2 Kommentare

Verwandte Themen