Less.js: less.render ne fonctionne pas avec les fichiers @import qui se trouvent dans des répertoires différents de nodejs

Créé le 17 déc. 2014 · 2Commentaires · Source: less/less.js

J'ai utilisé LESS pour implémenter le thème dans mon application et j'ai utilisé le module nodejs less pour compiler moins de fichiers en CSS, mais cela ne fonctionne pas dans un scénario particulier.

J'utilise également Bootstrap pour mon application et en utilisant moins de code source Bootstrap, je ne compile que le css que je veux dans mon application.

Je peux également remplacer les variables Bootstrap et les mixins dans mes différents thèmes. Ainsi, lors de la compilation de Bootstrap, je dois également prendre en compte des variables de thème et des mixins particuliers.

Alors, différenciez les variables/mixins Bootstrap et les règles CSS J'ai créé 2 fichiers différents,

application_variables.less - Il contient toutes les variables et mixins Bootstrap requis
application.less - Il contient toutes les règles CSS Bootstrap requises

Structure du répertoire Pour l'application

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

Explication de quel fichier contient quoi ?

1. /sample_application/themes/<-theme_name->/mixins/mixins.less
Ce fichier contient tous les mixins spécifiques à l'application et les mixins d'amorçage remplacés.

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

2. /sample_application/themes/<-theme_name->/variables/variables.less
Ce fichier contient toutes les variables spécifiques à l'application et les variables d'amorçage remplacées.

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

3. /sample_application/themes/<-theme_name->/<-theme_name->.less
Ce fichier contient des importations de fichiers de mixins et de variables pour ce thème particulier.

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

4. /sample_application/themes/theme.less
Ce fichier contient deux importations de fichiers. Le premier pour les variables Bootstrap qui est application_variables.less et le second pour les importations de fichiers de base de thèmes particuliers, par exemple. rouge.moins/bleu.moins

<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
Ce fichier contient une importation de fichier qui est /themes/themes.less et toutes les règles CSS Bootstrap requises.

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

6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
Ce fichier contient toutes les variables et mixins Bootstrap requis.

/*Bootstrap variables and mixins*/

Maintenant, j'ai un fichier de script de nœud qui dose la compilation sans bootstrap qui est compile-bootstrap.js

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);
    });
})();

Mais lorsque j'exécute ce script, j'obtiens l'erreur suivante

{ [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";' ] }

Ensuite, j'ai également essayé d'utiliser des chemins relatifs, mais cela donne toujours la même erreur

{ [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";' ] }

Source

Virbhadrasinh

Commentaire le plus utile

Notez que puisque la source est fournie au compilateur sous forme de chaîne, vous devez définir explicitement le chemin du fichier d'origine afin que le compilateur puisse l'utiliser comme base pour les importations et ainsi, sinon il ne peut tout simplement pas savoir quels sont tous ces chemins que vous spécifier sont relatifs à (très probablement, il n'utilisera que cwd mais c'est à peu près "aléatoire" au moment où il s'agit d'importer et il ne pointe plus nécessairement vers la racine de votre projet...). Par exemple:

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);
    });
})();

Il en va de même pour l'option paths , si je ne me trompe pas dans ce cas elles doivent être soit absolues soit relatives à la filename . En général, c'est une bonne idée d'apprendre comment lessc lui-même gère ces choses.

seven-phases-max le 19 déc. 2014

👍18 🎉5 ❤4

Tous les 2 commentaires

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 le 19 déc. 2014

👍18 🎉5 ❤4

Merci sept phases-max. Cette solution fonctionne bien, ce qui clos le problème.

Virbhadrasinh le 19 déc. 2014

Cette page vous a été utile?

0 / 5 - 0 notes