【问题标题】:ServiceStack Bundler and sub-directory Less filesServiceStack Bundler 和子目录 Less 文件
【发布时间】:2015-02-12 16:15:45
【问题描述】:

直到最近我还在使用相当尴尬的 dotless。因为我使用的是 VS2010,所以我只能使用一些我可以使用的东西,但是我遇到了 ServiceStack Bundler,它似乎工作得很好……除了一件事。

我的 Less 文件使用目录结构进行拆分 - 以简化操作,如下所示:

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

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

为了将它们链接在一起,我一直在使用@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 将无法编译); 重复使用 @import 语句多次的 @imported 代码 - 即使使用 (reference) 指令,导致臃肿/不正确的代码。

【问题讨论】:

    标签: css less servicestack


    【解决方案1】:

    您应该能够将 Bundler 的 bundler.js 文件修改为在处理 @import 指令时 less 应该搜索的 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);
        });
    }
    

    【讨论】:

    • 我真的很荣幸能从主角那里得到答案。我会假设它是正确的:)。谢谢你 - 原谅双关语。
    • @dotnetnoob thx,这就是如何将额外的路径选项传递给 less 编译器,它是否有效取决于 npm 的 less 库。
    • 抱歉,我不得不删除答案 - 我无法让路径选项起作用,并且正在努力想出一个令人满意的解决方案。
    【解决方案2】:

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

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

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

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

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

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

    更改包名称或主文件名,一切都应该工作。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-10-08
      • 1970-01-01
      • 2011-02-23
      • 2015-06-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多