3

我们在 MVC4 中为我们的项目使用引导程序。到目前为止，我们在主布局页面中引用了 bootstrap.less 文件，它运行良好。但是，出现了一个新要求，要求我们为每个部门页面定制外观（每个部门都有自己的布局，使用主布局）

bootstrap.less 有这样的结构：

@import variables.less // 定义所有变量

@import others // 所有导入，如 mixins.less、reset.less 等

因为我们需要注入我们的变量覆盖，我们创建了另一个更少的文件：

bootstrap-without-variables.less //包含所有没有来自 bootstrap.less 的 variables.less 的导入

这种分离的原因是注入我们的变量覆盖，以便我们可以自定义页面的引导样式。

我们正在使用SquishIt将较少的文件捆绑到一个包中。

这是捆绑包：

    Bundle.Css()
    .Add("~/bootstrap/variables.less")
    .Add("~/variable-override.less") // custom override
    .Add("~/bootstrap/bootstrap-without-variables.less")
    .MvcRender("styles_combined_#.js");

这根本不起作用。如果我删除 variables.less 并在 bootstrap-without-variables.less 中引用它（现在变得类似于 bootstrap.less），它工作得非常好。

我认为，问题在于每个文件在将它们组合在一起之前都经过独立评估并转换为 css。

有没有办法告诉捆绑器首先将文件捆绑成一个，然后评估并转换为 css 或更好的解决方案？

4

2 回答 2

2

就像AlexCuse提到的那样，我没有办法只使用 SquishIt 来做我上面提到的事情。但是，如https://github.com/jetheredge/SquishIt/issues/170中所述，AddString() 有一个重载，可让您添加动态较少的内容。

例如，

.AddString("LessString",".less") // .less 是扩展名

只要 LessString 不包含任何导入 (@import)，它就可以正常工作。因此，我从https://github.com/jetheredge/SquishIt下载了源代码并开始深入研究代码。通过代码，我发现通过 AddString() 加载的内容将 CurrentDirectory 设置为我的 IIS 的路径（“c:\windows\system32\inetsrv”）。结果，进口被抛出

FileNotFoundException（您正在导入一个无法找到的以 .less 结尾的文件。）

所以，我需要一种方法来设置当前目录（将搜索我的导入的参考位置）

这是我所做的：

STEP1：扩展资产以拥有一个名为 CurrentDirectory 的属性

  internal string CurrentDirectory { get; set; }

STEP2：向 AddString() 重载添加第三个可选参数

public T AddString(string content, string extension, string currentDirectory = null)
    {
        return AddString(content, extension, true, currentDirectory);
    }

STEP3：更新 AddString() 以将当前目录添加到 Asset

 T AddString(string content, string extension, bool minify, string currentDirectory = null)
    {
        if (bundleState.Assets.All(ac => ac.Content != content))
            bundleState.Assets.Add(new Asset { Content = content, Extension = extension, Minify = minify, CurrentDirectory = currentDirectory });
        return (T)this;
    }

STEP4：修改BundleBase上的PreprocessArbitary(For Release)设置当前目录

protected string PreprocessArbitrary(Asset asset)
    {
        if (!asset.IsArbitrary) throw new InvalidOperationException("PreprocessArbitrary can only be called on Arbitrary assets.");

        var filename = "dummy." + (asset.Extension ?? defaultExtension);
        var preprocessors = FindPreprocessors(filename);
        return asset.CurrentDirectory != null ?
                    directoryWrapper.ExecuteInDirectory(asset.CurrentDirectory, () => MinifyIfNeeded(PreprocessContent(filename, preprocessors, asset.Content), asset.Minify)) :
                    MinifyIfNeeded(PreprocessContent(filename, preprocessors, asset.Content), asset.Minify);
    }

对于Debug，修改RenderDebug设置当前目录

 if (asset.IsArbitrary)
            {
                var filename = "dummy" + asset.Extension;
                var preprocessors = FindPreprocessors(filename);
                var processedContent = asset.CurrentDirectory != null ?
                        directoryWrapper.ExecuteInDirectory(asset.CurrentDirectory, () => PreprocessContent(filename, preprocessors, asset.Content)) :
                        PreprocessContent(filename, preprocessors, asset.Content);
                sb.AppendLine(string.Format(tagFormat, processedContent));
            }

这是我现在添加动态或静态较少文件的方法：

.AddString("@import 'content/bootstrap/variables.less';", ".less", AppDomain.CurrentDomain.BaseDirectory)

对于我的上述要求，我将 variables.less 读入字符串构建器，然后添加我的 variable-override.less，最后将 bootstrap-without-variables.less 添加到字符串构建器。

到目前为止，它对我有用。我测试了以下场景：

  1. 带有导入的正常较少文件，例如.Add("~/content/styles.less")

  2. inline less 没有导入，例如.AddString(LessString, ".less")

  3. 带有导入的动态较少文件，例如.AddString("@import content/bootstrap/variables.less';", ".less", AppDomain.CurrentDomain.BaseDirectory)

    我会尽快做一个拉取请求。我希望这可以帮助那些希望通过导入来支持动态 LESS 内容的人。

于 2013-07-17T16:28:16.057 回答
1

你是对的，SquishIt 在合并文件之前做的处理更少。仅使用 SquishIt 无法满足您的要求，但我想您可以在进入的过程中自行组合文件（使用 .AddString 方法将生成的 .less 内容添加到包中）。我不确定，其中一种选择可能更适合您的需求。

于 2013-07-15T17:31:19.147 回答