node.js - less.render 在具有多个位于不同目录中的导入文件的 nodejs 中不起作用

Question

我已经使用 LESS 在我的应用程序中实现主题，并使用 nodejs less 模块将 less 文件编译为 CSS，但它在一个特定场景中不起作用。

我还在我的应用程序中使用 Bootstrap 并使用较少的 Bootstrap 源代码我只编译我想要在我的应用程序中的 css。

我还可以覆盖各种主题中的 Bootstrap 变量和混入。因此，在编译 Bootstrap 时，我还需要考虑我的主题变量和混入。

因此，区分 Bootstrap 变量/mixins 和 CSS 规则我创建了 2 个不同的文件，

• application_variables.less - 它包含所有必需的 Bootstrap 变量和混合
• application.less - 它包含所有必需的 Bootstrap 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 :- 此文件包含所有特定于应用程序的 mixins 和覆盖的 Bootstrap mixins。

<强>2。/sample_application/themes/<-theme_name->/variables/variables.less :- 此文件包含所有特定于应用程序的变量和覆盖的 Bootstrap 变量。

<强>3。/sample_application/themes/<-theme_name->/<-theme_name->.less :- 此文件包含该特定主题的 mixins 和变量的文件导入。

@import "./variables/variables";
@import "./mixins/mixins";

<强>4。/sample_application/themes/theme.less :- 此文件包含两个文件导入。第一个用于 Bootstrap 变量，它是 application_variables.less，第二个用于特定主题的基本文件导入，例如。少红/少蓝

@import "application_variables.less";
@import "red/red.less";

<强>5。/sample_application/resources/libraries/bootstrap/css/application.less :- 此文件包含一个文件导入，即/themes/themes.less 和所有必需的 Bootstrap CSS 规则。

@import "theme.less";
/*Bootstrap CSS rules*/

6./sample_application/resources/libraries/bootstrap/less/application_variables.less :- 此文件包含所有必需的 Bootstrap 变量和混合。

现在我有一个 Node 脚本文件，它是 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);
    });
})();

但是当我运行这个脚本时，我得到了以下错误

{ [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:
    [ '@import "application_variables.less";',
      '@import "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:
    [ '@import "./../resources/libraries/bootstrap/less/application_variables.less";',
      '@import "red/red.less";' ] }

Answer 1

请注意，由于源代码是作为字符串提供给编译器的，因此您需要显式设置原始文件路径，以便编译器可以将其用作导入等的基础路径，否则它无法知道所有内容您指定的那些路径是相对的(很可能它只会使用 cwd 但在实际导入时它几乎是“随机的”并且它不再需要指向您的项目根目录.. .).例如:

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

paths 选项也是如此，如果我没记错的话，在这种情况下它们应该是绝对的或相对于 filename 的。一般来说，学习如何做是个好主意lessc itself处理这些事情。