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

Question

我已经使用LESS在我的应用程序中实现了主题,并使用nodejs less模块​​将较少的文件编译到CSS,但它在一个特定的场景中不起作用.

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

我也可以在我的各种主题中覆盖Bootstrap变量和mixins.因此,在编译Bootstrap时我需要考虑我的主题变量和mixins.

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

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

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,第二个用于特定主题的基本文件导入,例如.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.

现在我有一个节点脚本文件,它使用bootstrap less编译,这是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自己如何处理这些事情是一个好主意.