为什么在调试模式下MVC4的@Styles.Render()没有按预期工作

Question

我正在实现MVC4中的打包和压缩支持，并设置它可以自动为我编译Bootstrap .less文件。我在BundleConfig.cs文件中有以下代码：

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        // base bundles that come with MVC 4

        var bootstrapBundle = new Bundle("~/bundles/bootstrap").Include("~/Content/less/bootstrap.less");
        bootstrapBundle.Transforms.Add(new TwitterBootstrapLessTransform());
        bootstrapBundle.Transforms.Add(new CssMinify());
        bundles.Add(bootstrapBundle);
    }
}

TwitterBootsrapLessTransform的定义如下（由于需要将子.less文件导入dotLess中，因此比我想象中更为复杂）。

public class TwitterBootstrapLessTransform : IBundleTransform
{
    public static string BundlePath { get; private set; }

    public void Process(BundleContext context, BundleResponse response)
    {
        setBasePath(context);

        var config = new DotlessConfiguration(DotlessConfiguration.GetDefault());
        config.LessSource = typeof(TwitterBootstrapLessMinifyBundleFileReader);

        response.Content = Less.Parse(response.Content, config);
        response.ContentType = "text/css";
    }

    private void setBasePath(BundleContext context)
    {
        BundlePath = context.HttpContext.Server.MapPath("~/Content/less" + "/imports" + "/");
    }
}

public class TwitterBootstrapLessMinifyBundleFileReader : IFileReader
{
    public IPathResolver PathResolver { get; set; }
    private string basePath;

    public TwitterBootstrapLessMinifyBundleFileReader(): this(new RelativePathResolver())
    {
    }

    public TwitterBootstrapLessMinifyBundleFileReader(IPathResolver pathResolver)
    {
        PathResolver = pathResolver;
        basePath = TwitterBootstrapLessTransform.BundlePath;
    }

    public bool DoesFileExist(string fileName)
    {
        fileName = PathResolver.GetFullPath(basePath + fileName);

        return File.Exists(fileName);
    }

    public byte[] GetBinaryFileContents(string fileName)
    {
        throw new System.NotImplementedException();
    }

    public string GetFileContents(string fileName)
    {
        fileName = PathResolver.GetFullPath(basePath + fileName);

        return File.ReadAllText(fileName);
    }
}

在我的基本 Layout.cshtml 页面上，我尝试通过以下方式呈现 css 文件

@Styles.Render("~/bundles/bootstrap");

正如MVC教程所建议的那样，但客户端浏览器最终请求的文件是什么。

http://localhost:53729/Content/less/bootstrap.less

这会导致一个错误。如果我将以下链接放入基本布局页面中，它会按预期工作。

<link href="~/bundles/bootstrap" rel="stylesheet" type="text/css" />

为什么在调试模式下 @Styles.Render() 的行为与发布模式不同？在发布模式下它能够正常工作。我可以理解你不希望在调试模式下进行打包和压缩，但是我如何强制使该捆绑包始终以相同的方式工作呢？

- PlTaylor

---

我发现这段代码片段非常有用。你应该考虑写一篇关于如何让Twitter Bootstrap和Dotless协同工作的博客文章。 - Rebecca

谢谢，也许等我有更多的时间时就会开始写博客。 - PlTaylor

@PITaylor 你是否遇到了以下类型的CSS输出错误：缩小失败。返回未缩小的内容。(1381,2)：运行时错误CSS1019：发现意外的标记“{”... - Rebecca

我遇到了kendo min css文件的问题。Greasemonkey压缩工具似乎有点敏感。 - PlTaylor

Answer 1

基本上，当 debug="true" 时，Script/Style Render 方法会假定优化关闭，也就是没有捆绑和缩小，这意味着它不会调用你的转换；相反，它将仅呈现出原始包内容的链接（在您的情况下为 boostrap.less）。

您可以通过设置 BundleTable.EnableOptimizations = true 来覆盖此行为并始终运行优化。这将强制 render 方法始终进行捆绑/缩小。

- Hao Kung

---

你能将这个设置为特定的 bundle 吗？ - PlTaylor

不，目前这是一个全局开关，它可以在整个应用中打开/关闭捆绑/压缩功能。 - Hao Kung

我想编辑您的帖子，因为我认为属性的名称不是EnalbeOptimizations而是EnableOptimizations。StackOverflow不允许进行1个字符的编辑... :-( - Bernhard Döbler

我认为这个解决方案比被选中的答案更优雅！ - Astaar

Answer 2

我最终做的是在我的_Layout.cshtml文件中添加了一个调试if语句，这样无论如何都会渲染bundle。我对这种解决方案并不太满意，但现在它可以工作了。

@if (Context.IsDebuggingEnabled)
{
    <link href="~/bundles/bootstrap" rel="stylesheet" type="text/css" />
}
else
{
    @Styles.Render("~/bundles/bootstrap")
}

- PlTaylor

Answer 3

我通过让dotless服务 .less 文件来避免这种情况。

在 web.config 中：

   <handlers>
    <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
    </handlers>

- chrisortman