css - 使用 SquishIt 在单独的 less 文件中引用变量(支持动态 LESS 内容)？

Question

我们在 MVC4 中为我们的元素使用 Bootstrap 。到目前为止，我们在主布局页面中引用了 bootstrap.less 文件并且效果很好。然而，一个新的要求出现了，要求我们为每个部门页面定制外观(每个部门都有自己的布局，使用主布局)

bootstrap.less 有这样的结构:

@import variables.less // defines all the variables

@import others // all imports like mixins.less, reset.less etc

因为我们需要注入(inject)我们的变量覆盖，我们创建了另一个 less 文件:

bootstrap-without-variables.less //contains all the imports without the variables.less from bootstrap.less

这种分离的原因是为了注入(inject)我们的变量覆盖，以便我们可以为我们的页面自定义 Bootstrap 样式。

我们正在使用 SquishIt将 less 文件打包成一个包。

这是包:

    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或者更好的解决这个问题的方法？

Answer 1

就像AlexCuse提到的那样，我无法仅使用 SquishIt 来完成上面提到的操作。然而，如https://github.com/jetheredge/SquishIt/issues/170中所述, AddString() 有一个重载，可让您添加动态较少的内容。

例如，

.AddString("LessString",".less") // .less being the extension

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

FileNotFoundException (You are importing a file ending in .less thatcannot be found.)

所以，我需要一种方法来设置当前目录(将搜索我的导入的引用位置)

这是我做的:

第 1 步:扩展 Assets 以具有名为 CurrentDirectory 的属性

  internal string CurrentDirectory { get; set; }

第 2 步:向 AddString() 重载添加了第三个可选参数

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

第 3 步:更新 AddString() 以将当前目录添加到 Assets

 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));
            }

这是我现在添加动态或静态 less 文件的方法:

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

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

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

1. 带有导入的普通 less 文件，例如.Add("~/content/styles.less")

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

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

   我会尽快尝试执行拉取请求。我希望这对希望通过导入支持动态 LESS 内容的人们有所帮助。