less.render 在不同目录中的多个导入文件的 nodejs 中不起作用

Question

我使用 LESS 在我的应用程序中实现主题化，并使用 nodejs less 模块将更少的文件编译为 CSS，但它在一种特定情况下不起作用。

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

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

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

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

2。 /sample_application/themes//variables/variables.less :- 此文件包含所有应用程序特定变量和覆盖的引导变量。

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

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

4. /sample_application/themes/theme.less :- 该文件包含两个文件导入。第一个用于引导变量，即 application_variables.less，第二个用于特定主题的基本文件导入，例如。 red.less/blue.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 变量和 mixins。

现在我有一个节点脚本文件，它是 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 如何处理这些事情是个好主意。