Question

我们在MVC4中使用bootstrap作为我们的项目。到目前为止，我们在主布局页面中引用了bootstrap.less文件并且工作得很好。但是，出现了一个新的要求，要求我们为每个部门页面定制外观（每个部门都有自己的布局，使用主要布局）

bootstrap.less有这样的结构：

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

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

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

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

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

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

这是Bundle：

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

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

我认为，问题在于，在将每个文件组合在一起之前，会对每个文件进行评估并将其转换为css。

有没有办法告诉捆绑商首先将文件捆绑成一个，然后评估并转换为css或更好地解决这个问题？

Answer 1

就像AlexCuse所提到的那样，我没有办法只使用SquishIt做我上面提到的事情。但是，正如https://github.com/jetheredge/SquishIt/issues/170中所提到的，AddString（）存在一个重载，它允许您添加动态较少的内容。

例如，

.AddString（“LessString”，“。less”）//。无扩展名

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

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

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

这是我做的：

第1步：扩展资产以拥有名为CurrentDirectory的属性

  internal string CurrentDirectory { get; set; }

第2步：在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添加到字符串构建器中。

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

使用导入的正常文件较少，例如.Add("~/content/styles.less")
在没有进口的情况下内联，例如.AddString(LessString, ".less")
带有导入的动态较少文件，例如.AddString("@import content/bootstrap/variables.less';", ".less", AppDomain.CurrentDomain.BaseDirectory)

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

Answer 2

你说得对，Squish在组合文件之前处理的次数较少。没有办法只使用SquishIt做你要求的，但我想你可以在途中自己组合文件（使用.AddString方法将你得到的.less内容添加到包中）。其中一种选择可能更适合您的需求，我不确定。

使用SquishIt（支持动态LESS内容）在单独的less文件中引用变量？

2 个答案: