4

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

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 设置为 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"));


当首先声明 component1.less

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

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

当首先声明 componenet2.less

奇怪的是 - 如果我在 component1 和 component2 中导入不同的文件，它会起作用

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

样式/component1.less

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

body {
   background:@color;
}

作品

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

编辑

使用这种结构的原因：

  • 在调试模式下发送单独的更少文件，因为它更容易调试。行号注释不是很有帮助

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

在每个文件的顶部添加 @import "variables" 是丑陋的。

因此，尝试将 variables.less 声明为 .Include("variables.less", file-dependant-on-variables.less, ...) 的一部分，由于此处提到的一些范围问题，这显然不起作用：Dotless - Can't使用 MVC 捆绑在单独的文件中引用较少的变量

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

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

4

3 回答 3

5

根据文档：

在 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 功能，我自己可能认为这是一个可以接受的选项。

于 2014-01-06T23:17:44.487 回答
4

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

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

只需将此文件放入捆绑器中即可。这个包最终会变小，因为 variables.less 只包含一次而不是两次，这绝对适用于 Dotless。

于 2014-01-06T15:36:59.270 回答
3

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

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

'..\styles\component2.less':

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

   ----------^

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

/// <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 库之外更改此行为。

于 2014-01-07T13:08:07.200 回答