node.js - npm 的 less 库 - 如何定义导入的子目录

Question

我正在尝试配置使用 npm 的 less 库的 ServiceStack bundler 。

我有许多子目录，其中存储的文件较少。

我遇到一个问题，即编译时不会触发对 less 文件的更改。如果我像这样直接在捆绑文件中引用该文件，它们就会这样做:

scaffolding/grid.less

但不是这样使用的:

捆绑文件:main.less

main.less:@import“脚手架/grid.less”

第一个选项会导致更多有关重复代码的问题，目前不是可行的方法。

之前问过一个不同的问题，似乎编译器可能找不到 @imports 的路径。然而，有一个配置部分使用了 npm 的 less 库。

function compileLess(lessCss, lessPath, cb) {
    var lessDir = path.dirname(lessPath),
        fileName = path.basename(lessPath),
        options = {
            paths: ['.', lessDir, lessDir + '/scaffolding'], // Specify search paths for @import directives
            filename: fileName
        };

    less.render(lessCss, options, function (err, css) {
        if (err) throw err;
        cb(css);
    });
}

您可以看到我如何尝试添加子目录，但它没有任何效果 - 要么我定义子目录的方式不正确，要么子目录的路径错误/不完整，要么它是正确的并且编译器仍然没有识别它。

我不知道该去哪里。

任何建议表示赞赏。

Answer 1

这是我的一个错误，但这个错误不容易被发现，所以我会发布问题的原因，这样其他人就不会像我一样花几个小时来寻找不必要问题的解决方案。

我正在使用 ServiceStack Bundler - 我相信使用 npm 的 less 库的任何解决方案也会出现此问题。

我的主要问题是编译时没有触发我的任何更改。我使用大量 @import 和大量子目录来存储较少的文件，因此我的第一个想法是问题是由于子目录造成的，后来又是由于 @import 语句造成的。但两者都不正确。

我定义了一个包:main.css.bundle

在 bundle 中，我调用了包含所有其他 @imported 文件的主 less 文件:main.less

问题是 less 通常会保留 main.css，但 bundle 也会根据 bundle 名称为其输出提供相同的名称。所以两者是矛盾的。

更改 bundle 名称或主文件名，一切都应该可以工作。