Question

直到最近我才使用相当笨拙的无点。由于我使用的是VS2010，我只能使用我可以使用的东西，但我遇到的ServiceStack Bundler看起来效果很好......除了一件事。

My Less文件使用目录结构进行拆分 - 简化操作，如下所示：

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

每个目录都有很多文件，特别是mixins等。

为了将它们链接在一起，我一直在使用@import功能。

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

@import "utilities/all-utilities.less"

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

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

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

相反，我必须使用：

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

等等。

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

有什么想法吗？

/ * UPDATE * /

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

这是我迄今为止所尝试过的：

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

从捆绑文件中调用所有较少的文件，并在必要时将@import语句添加到较少的文件中（注意捆绑包不会在没有这些文件的情况下编译）; 使用@import语句复制@imported代码的次数 - 即使使用（reference）指令时也会导致代码膨胀/错误。

Answer 1

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

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

我的错误，但不容易发现，所以我会发布我的问题的原因，以便其他人不花时间，因为我追求解决方案不必要的问题。

我使用的是ServiceStack Bundler - 我相信使用npm的库少的任何解决方案都会出现这个问题。

我的主要问题是我的所有更改都没有在编译时触发。我使用了大量的@imports和众多的子目录，因此我的第一个想法是问题是由于子目录，后来由于@import语句。然而，两者都不正确。

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

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

问题是较少通常会保留main.css，但捆绑包也会根据捆绑名称为其输出提供相同的名称。所以两者都是冲突的。

更改捆绑包名称或主要较少的文件名，所有这些都应该有用。

ServiceStack Bundler和子目录Less文件

2 个答案: