Less.js: less.render no funciona con archivos @import que se encuentran en diferentes directorios en nodejs

Creado en 17 dic. 2014 · 2Comentarios · Fuente: less/less.js

He usado MENOS para implementar temas en mi aplicación y usar el módulo de nodejs less para compilar menos archivos en CSS, pero no funciona en un escenario en particular.

También estoy usando Bootstrap para mi aplicación y usando Bootstrap menos código fuente, estoy compilando solo el CSS que quiero en mi aplicación.

También puedo anular las variables y mixins de Bootstrap en mis diversos temas. Entonces, al compilar Bootstrap, también necesito considerar variables de tema particulares y mixins.

Entonces, diferencie las variables / mixins de Bootstrap y las reglas de CSS. He creado 2 archivos diferentes,

application_variables.less: contiene todas las variables y mixins de Bootstrap necesarios
application.less: contiene todas las reglas CSS de Bootstrap necesarias

Estructura de directorio para la aplicación

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

¿Explicación de qué archivo contiene qué?

1. /sample_application/themes/<-theme_name->/mixins/mixins.less
Este archivo contiene todos los mixins específicos de la aplicación y los mixins de arranque anulados.

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

2. /sample_application/themes/<-theme_name->/variables/variables.less
Este archivo contiene todas las variables específicas de la aplicación y las variables de arranque anuladas.

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

3. /sample_application/themes/<-theme_name->/<-theme_name->.less
Este archivo contiene importaciones de archivos de mixins y variables para ese tema en particular.

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

4. /sample_application/themes/theme.less
Este archivo contiene dos importaciones de archivos. El primero para las variables de Bootstrap, que es application_variables.less, y el segundo para las importaciones de archivos base de temas particulares, por ejemplo. rojo sin / azul sin

<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
Este archivo contiene una importación de archivo que es /themes/themes.less y todas las reglas CSS de Bootstrap necesarias.

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

6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
Este archivo contiene todas las variables y mixins de Bootstrap necesarios.

/*Bootstrap variables and mixins*/

Ahora tengo un archivo de script de nodo que dosifica la compilación de bootstrap menos que es 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);
    });
})();

Pero cuando ejecuto este script, obtengo el siguiente error

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

Luego intenté usar rutas relativas también, pero sigue dando el mismo error

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

Fuente

Virbhadrasinh

Comentario más útil

Tenga en cuenta que, dado que la fuente se proporciona al compilador como una cadena, debe establecer explícitamente la ruta del archivo original para que el compilador pueda usarla como base para las importaciones y, de lo contrario, simplemente no puede saber cuáles son todas esas rutas que especificar son relativas a (lo más probable es que use solo cwd pero es bastante "aleatorio" en el momento en que realmente se trata de importaciones y ya no es necesario que apunte a la raíz de su proyecto ...). P.ej:

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

Lo mismo ocurre con la opción paths , si no me equivoco en este caso, deberían ser absolutas o relativas a filename . En general, es una buena idea aprender cómo el propio lessc maneja estas cosas.

seven-phases-max en 19 dic. 2014

👍18 🎉5 ❤4

Todos 2 comentarios

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 en 19 dic. 2014

👍18 🎉5 ❤4

Gracias siete-fases-max. Esta solución funciona bien, por lo que se cierra el problema.

Virbhadrasinh en 19 dic. 2014

¿Fue útil esta página

0 / 5 - 0 calificaciones