两次导入相同的文件时无Dots MVC捆绑问题

Question

我试图使用无点来完成以下结构：

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

@color:green;

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

@import "variables";

body {
   background:@color;
}

styles / component2.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"));

当调试设置为 true

时，一切正常

但调试设置为 false

时

只有在Include方法中传递的第一个文件才能解析@import“变量”。其余的都失败了。

首先是声明“〜/ 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"));

奇怪 - 如果我在component1和component2

中导入不同的文件，它会起作用

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

风格/ component1.less

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

body {
   background:@color;
}

有什么想法？我已经在这几天打了个.. ..

修改

使用此结构的原因：

• 在调试模式下发送少量文件，因为它更容易调试。行号注释不是很helpful

• 在生产中投放时连接和缩小所有较少的文件。

在每个文件的顶部添加@import“变量”很难看。

所以，尝试声明变量。作为.Include（“variables.less”，依赖于文件的变量。无，...）的一部分。 由于这里提到的一些范围问题，这显然无效：Dotless - Can't reference less variable in separate file with MVC Bundling

有一个解决方法，连接每个较少文件的内容，并使用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;仅在第一个组件的范围内定义;在第二个组件的范围内未定义它可能最终会被规则或甚至整个较少的文件忽略（我不是非常熟悉默认行为，你可以添加额外的属性和规则，看看会发生什么）。您可以通过检查预处理程序日志或以其他方式允许在控制台中跟踪其错误来确认这一点。

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

Answer 2

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

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

然后将此文件扔进捆绑器。捆绑包最终会变小，因为variables.less只包含一次而不是两次，这绝对适用于Dotless。

Answer 3

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

  

变量@color在文件

的第4行未定义      

” .. \样式\ 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行）。而且你没有机会在无点库之外改变这种行为。