ServiceStack Bundler 和子目录 Less 文件

Question

直到最近我还在使用相当笨拙的无点。因为我使用的是 VS2010，所以我只能使用我可以使用的东西，但是我遇到了 ServiceStack Bundler，它似乎工作得很好......除了一件事。

我的 Less 文件使用目录结构拆分 - 为了简化事情，如下所示：

scaffolding/my-scaffolding.less
utilities/my-utilities.less
ui/my-ui.less

每个目录都有很多文件，尤其是 mixins 等

为了link他们在一起，我一直在使用@import功能。

我的主要 less 文件 - main.less 包含以下内容：

@import "utilities/all-utilities.less"

此处列出了所有实用程序，因为它使我能够即插即用各种文件集。此代码之前工作正常。

但是我发现 ServiceStack 不会接受更改，除非我通过捆绑文件单独直接引用所有较少的文件，这有点痛苦。

因此，我无法使用：main.less 并导入所有子文件。

相反，我必须使用：

utilities/util1.less
utilities/util2.less
utilities/util3.less

等等。

我正在使用 ms build 函数进行编译。

有什么想法吗？

/* 更新 */

尝试了下面推荐的答案但没有成功。

这是我目前尝试过的方法：

调用包含所有@import 声明的单个 less 文件； 编译时不触发更新。

从 bundle 文件中调用所有 less 文件，并在必要时将 @import 语句添加到 less 文件中（请注意，如果没有这些，bundler 将无法编译）； 复制@imported 代码的次数与使用@import 语句的次数一样多——即使使用了(reference) 指令，也会导致bloated/incorrect 代码。

Answer 1

您应该能够将 Bundler 的 bundler.js 文件修改为 less 在处理 @import 指令时应该搜索的 specify additional paths：

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

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

Answer 2

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

我正在使用 ServiceStack Bundler - 我相信这个问题也会发生在任何使用 npm 的 less 库的解决方案上。

我的主要问题是 none 我的更改是在编译时触发的。我为我的 less 文件使用了很多 @imports 和许多子目录，所以我的第一个想法是问题是由于子目录，后来，由于 @import 语句。然而两者都不正确。

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

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

问题是 less 通常会保留 main.css，但捆绑包也会根据捆绑包名称为其输出赋予相同的名称。所以两者都是矛盾的。

更改包名或主要的 less 文件名，一切都应该有效。

ServiceStack Bundler 和子目录 Less 文件

ServiceStack Bundler and sub-directory Less files

css

less

servicestack