Less.js: less.render não está funcionando com arquivos @import que estão em diretórios diferentes em nodejs

Criado em 17 dez. 2014 · 2Comentários · Fonte: less/less.js

Eu usei LESS para implementar temas em meu aplicativo e usando o módulo nodejs less para compilar menos arquivos para CSS, mas não está funcionando em um cenário específico.

Também estou usando Bootstrap para meu aplicativo e usando Bootstrap menos código-fonte. Estou compilando apenas o css que desejo em meu aplicativo.

Também posso substituir variáveis e mixins do Bootstrap em meus vários temas. Portanto, ao compilar o Bootstrap, preciso considerar variáveis de tema específicas e mixins também.

Portanto, diferencie as variáveis / mixins do Bootstrap e as regras CSS. Criei 2 arquivos diferentes,

application_variables.less - Contém todas as variáveis Bootstrap e mixins necessários
application.less - Contém todas as regras CSS Bootstrap necessárias

Estrutura de diretório para o aplicativo

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

Explicação de qual arquivo contém o quê?

1. /sample_application/themes/<-theme_name->/mixins/mixins.less
Este arquivo contém todos os mixins específicos do aplicativo e mixins de bootstrap substituídos.

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

2. /sample_application/themes/<-theme_name->/variables/variables.less
Este arquivo contém todas as variáveis específicas do aplicativo e variáveis de inicialização substituídas.

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

3. /sample_application/themes/<-theme_name->/<-theme_name->.less
Este arquivo contém importações de mixins e variáveis para aquele tema em particular.

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

4. /sample_application/themes/theme.less
Este arquivo contém duas importações de arquivo. O primeiro para as variáveis do Bootstrap que é application_variables.less e o segundo para as importações de arquivos de base de temas específicos, por exemplo. red.less / blue.less

<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 arquivo contém um arquivo de importação que é /themes/themes.less e todas as regras CSS Bootstrap necessárias.

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

6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
Este arquivo contém todas as variáveis e mixins necessários do Bootstrap.

/*Bootstrap variables and mixins*/

Agora eu tenho um arquivo de script de nó que administra o bootstrap menos a compilação que é 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);
    });
})();

Mas quando executo este script, recebo o seguinte erro

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

Então eu tentei usar caminhos relativos também, mas ainda dando o mesmo erro

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

Fonte

Virbhadrasinh

Comentários muito úteis

Observe que, uma vez que a fonte é fornecida ao compilador como uma string, você precisa definir explicitamente o caminho do arquivo original para que o compilador possa usá-lo como base para importações e, caso contrário, ele simplesmente não pode saber quais são todos esses caminhos que você especificar são relativos a (provavelmente usará apenas cwd mas é muito "aleatório" no momento em que realmente se trata de importações e não precisa mais apontar para a raiz do seu projeto ...). Por exemplo:

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

O mesmo vale para a opção paths , se não me engano, neste caso, elas deveriam ser absolutas ou relativas a filename . Em geral, é uma boa ideia aprender como lessc si lida com essas coisas.

seven-phases-max em 19 dez. 2014

👍18 🎉5 ❤4

Todos 2 comentários

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

O mesmo vale para a opção paths , se não me engano, neste caso, elas deveriam ser absolutas ou relativas a filename . Em geral, é uma boa ideia aprender como lessc si lida com essas coisas.

seven-phases-max em 19 dez. 2014

👍18 🎉5 ❤4

Obrigado, sete fases-máx. Esta solução está funcionando bem, portanto, encerrando o problema.

Virbhadrasinh em 19 dez. 2014

Esta página foi útil?

0 / 5 - 0 avaliações