两次导入相同的较少文件时出现 Dotless MVC 捆绑问题

Question

我正在尝试使用无点来完成以下结构：

styles/variables.less - 包含所有变量，如下所示

@color:green;

styles/component1.less - 导入 variables.less 的一些随机组件特定样式

@import "variables";

body {
   background:@color;
}

styles/component2.less - 更多样式也导入全局 variables.less 文件

@import "variables";

a {
    color:@color;
}

BundleConfig.cs - 如下声明捆绑包。我正在使用这个捆绑添加：https://gist.github.com/benfoster/3924025

bundles.Add(new Bundle("~/styles/css", new LessTransform()).Include("~/styles/component1.less", "~/styles/component2.less"));

当 Debug 设置为 true

时一切正常

但是当 Debug 设置为 false

只有在 bundle 的 Include 方法中传入的第一个文件才能解析 @import "variables"。其余的都失败了。

下面是先声明“~/styles/component1.less”的输出

bundles.Add(new Bundle("~/styles/css", new LessTransform()).Include("~/styles/component1.less", "~/styles/component2.less"));

首先声明“~/styles/component2.less”时的输出

bundles.Add(new Bundle("~/styles/css", new LessTransform()).Include("~/styles/component2.less", "~/styles/component1.less"));

奇怪的是，如果我在组件 1 和组件 2 中导入不同的文件，它会起作用

例如，如果我在任一文件中将“varibales”重命名为“variables.less”，只是为了使这些导入看起来有点不同。有用。如下所示

styles/component1.less

@import "variables.less"; // added extension here

body {
   background:@color;
}

有什么想法吗？这几天我一直在摆弄这个..

编辑

使用这种结构的原因：

• 在调试模式下单独发送更少的文件，因为这样更容易调试。行号 cmets 不是很helpful

• 在生产环境中连接和缩小所有 less 文件。

在每个文件的顶部添加@import“变量”是丑陋的。

因此，尝试将 variables.less 声明为 .Include("variables.less", file-dependant-on-variables.less, ...) 的一部分 由于此处提到的一些范围问题，这显然不起作用：Dotless - Can't reference less variable in separate file with MVC Bundling

有一个解决方法，连接每个 less 文件的内容，并使用 Less 来解析连接的文件。这里的例子，https://groups.google.com/forum/?fromgroups#!topic/dotless/j-8OP1dNjUY

但在那种情况下，我似乎无法获得已解析文件的缩小版本。

Answer 1

根据docos：

在 v1.3.0 - v1.3.3 @import 多次导入文件，您可以 使用 @import-once 覆盖此行为。

在 v1.4.0 中，@import-once 已被删除，@import 导入一次 默认。这意味着与以下

变量的第二次导入被忽略，变量@color:green;只定义在第一个组件的范围内；在第二个组件的范围内未定义它可能最终会被规则甚至整个 less 文件忽略（我对默认行为不是很熟悉，您可以添加额外的属性和规则，看看会发生什么）。您可以通过检查预处理器日志或以其他方式允许在控制台中跟踪其错误来确认这一点。

将“更高”级别的变量导入共享范围，如@Hans 建议的 (+1) 应该可以解决此问题。一个暂定的替代方案可能是将预处理器降级到 v1.3.0-v1.3.3，以便 @import 多次触发。由于我在处理 css 预处理器时的偏好几乎完全围绕它们的变量和 mixin 功能，我自己可能认为这是一个可以接受的选项。

Answer 2

我可能在这里遗漏了一些东西，因为您没有说明为什么要尝试实现此结构，但您可以轻松避免该问题并通过重新排列文件结构生成较小的结果包。创建一个包含以下内容的第 4 个文件：

@import "variables.less";
@import "component1.less";
@import "component2.less";

然后把这个文件扔到打包器中。这个包最终会变小，因为 variables.less 只包含一次而不是两次，这绝对适用于 Dotless。

Answer 3

@o.v.绝对正确。 Dotless 在解析 bundle 中的第二个 *.less 文件时产生下一个错误：

变量@color 在文件的第 4 行未定义

'..\styles\component2.less':

[3]: 一个{ [4]: 颜色:@color;

   ----------^

如果您查看无点源，您会在 dotless.Core.Importers.Importer 类中找到 CheckIgnoreImport 方法，该方法为每个导入的文件调用：

/// <summary>
///  returns true if the import should be ignored because it is a duplicate and import-once was used
/// </summary>
/// <param name="import"></param>
/// <returns></returns>
protected bool CheckIgnoreImport(Import import, string path)
{
    if (_rawImports.Contains(path, StringComparer.InvariantCultureIgnoreCase))
    {
        return import.IsOnce;
    }
    _rawImports.Add(path);

    return false;
}

目前import.IsOnce 的值始终为true（参见dotless.Core.Parser.Parsers 类，第1080 行）。而且您没有机会在 dotless 库之外更改此行为。