Less.js: less.renderは、nodejsの異なるディレクトリにある@importファイルでは機能しません

LESSを使用してアプリケーションにテーマを実装し、nodejs lessモジュールを使用してCSSにコンパイルするファイルを減らしましたが、特定のシナリオでは機能しません。

また、アプリケーションにBootstrapを使用しており、Bootstrapの少ないソースコードを使用して、アプリケーションに必要なcssのみをコンパイルしています。

さまざまなテーマのブートストラップ変数とミックスインをオーバーライドすることもできます。 したがって、Bootstrapをコンパイルする際には、特定のテーマ変数とミックスインも考慮する必要があります。

したがって、ブートストラップ変数/ミックスインとCSSルールを区別して2つの異なるファイルを作成しました。

• application_variables.less-必要なすべてのブートストラップ変数とミックスインが含まれています
• application.less-必要なすべてのブートストラップCSSルールが含まれています

アプリケーションのディレクトリ構造

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

どのファイルに何が含まれているのか説明？

1. /sample_application/themes/<-theme_name->/mixins/mixins.less
このファイルには、すべてのアプリケーション固有のミックスインとオーバーライドされたブートストラップミックスインが含まれています。

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

2. /sample_application/themes/<-theme_name->/variables/variables.less
このファイルには、すべてのアプリケーション固有の変数とオーバーライドされたブートストラップ変数が含まれています。

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

3. / sample_application / themes / <-theme_name->/<-theme_name->。less
このファイルには、その特定のテーマのミックスインと変数のファイルインポートが含まれています。

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

4. /sample_application/themes/theme.less
このファイルには、2つのファイルインポートが含まれています。 1つ目はapplication_variables.lessであるBootstrap変数用で、2つ目は特定のテーマのベースファイルインポート用です。 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
このファイルには、/ themes /themes.lessである1つのファイルインポートと必要なすべてのブートストラップCSSルールが含まれています。

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

6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
このファイルには、必要なすべてのBootstrap変数とミックスインが含まれています。

/*Bootstrap variables and mixins*/

今、私はcompile-bootstrap.jsであるブートストラップレスコンパイルを投与する1つのノードスクリプトファイルを持っています

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

しかし、このスクリプトを実行すると、次のエラーが発生します

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

次に、相対パスも使用してみましたが、それでも同じエラーが発生します

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