Tại sao MVC4 @ Styles.Render() không hoạt động như mong đợi ở chế độ gỡ lỗi

Question

Tôi đang triển khai hỗ trợ gói và rút gọn trong MVC4 và thiết lập nó để có thể biên dịch các tệp Bootstrap .less tự động cho tôi. Tôi có đoạn code sau trong BundleConfig.cs tôi nộp

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

Các TwitterBootsrapLessTransform là như sau (nó là phức tạp hơn tôi muốn bởi vì sự cần thiết phải nhập khẩu các file phụ .less vào 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); 
    } 
} 

Trên trang cơ sở _Layout.cshtml của tôi, tôi đã cố gắng để làm cho các tập tin css bằng cách làm này

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

như được đề xuất bởi các mvc tutorial nhưng file clien t browser kết thúc bằng yêu cầu là

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

gây ra lỗi. Nếu tôi đặt liên kết sau vào trang bố cục cơ sở, nó hoạt động như mong đợi.

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

Tại sao @ Styles.Render không hoạt động giống như trong chế độ gỡ lỗi? Nó hoạt động trong chế độ phát hành. Tôi có thể hiểu làm thế nào bạn không muốn nó bundling và minifying trong gỡ lỗi nhưng làm thế nào tôi có thể buộc bó này để làm việc theo cùng một cách luôn luôn?

Answer 1

Điều tôi đã làm là đặt một lệnh gỡ rối nếu câu lệnh trong _Layout.cshtml của tôi để gói sẽ hiển thị không có vấn đề gì. Tôi không điên về nó như một giải pháp nhưng nó đang làm việc cho bây giờ.

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

Answer 2

Vì vậy, về cơ bản khi debug="true", các Script/Phong cách Render phương pháp tối ưu hóa cho rằng tắt, có nghĩa là không bó và không có việc rút gọn, có nghĩa là nó sẽ không gọi vào bạn chuyển đổi; thay vào đó, nó sẽ chỉ hiển thị các liên kết đến nội dung thô của gói (Đó là boostrap.less trong trường hợp của bạn).

Bạn có thể ghi đè hành vi này và luôn chạy tối ưu hóa bằng cách đặt BundleTable.EnableOptimizations = true. Điều này sẽ buộc các phương thức hiển thị luôn thực hiện đóng gói/rút gọn.

Answer 3

tôi làm được việc này bằng cách cho phép dotless phục vụ các tập tin .less

trong web.config:

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