17

MVC4でバンドルおよびミニネーションのサポートを実装していて、自動的にブートストラップレスレスファイルをコンパイルできるように設定しています。私はデバッグモードでMVC4 @ Styles.Render()が期待どおりに動作しないのはなぜですか?

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); 
    } 
} 
(理由ドットなしにサブ.lessファイルをインポートする必要性から、私が希望よりも複雑である)私のBundleConfig.csに次のコードを持って次のようにTwitterBootsrapLessTransformがある

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

を提出します私はmvc tutorialによって提案されたが、ファイルCLIENされるように、この

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

を行うことにより、CSSファイルをレンダリングしようとした私のベース_Layout.cshtmlページ

ブラウザが要求を終了すると、エラーの原因となるのは、

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

です。基本レイアウトページに次のリンクを挿入すると、期待どおりに動作します。

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

なぜ@ Styles.Render()はデバッグモードで同じように動作しないのですか?リリースモードで動作します。どのようにバンドルしてデバッグするのが嫌なのか理解できますが、このバンドルを常に同じ方法で動作させるにはどうしたらいいですか?

+0

私はこのコードスニペットは非常に有用であることが判明。あなたはTwitter BootstrapとDotlessが一緒に働く方法についてのブログ記事を作ることを検討すべきです。 – Junto

+0

ありがとう、多分私は自分自身のために私はブログを開始するより多くの時間を得る。 – PlTaylor

+0

@PITaylor css出力に次の種類のエラーが表示されています。最小化に失敗しました。未確認のコンテンツを返す(1381,2):実行時エラーCSS1019:予期しないトークン、 '{' ... – Junto

答えて

10

私がやったことは、_Layout.cshtmlにdebug ifステートメントを入れてバンドルが何をしても表示されるようにすることでした。私は解決策としてそれについて夢中ではないが、今のところ働いている。そこで、基本的debug="true"、スクリプト/スタイル方法が最適化がまったくバンドルし、それはあなたの変換に呼び出していないことを意味していない縮小を意味しない、オフになっていることを前提とレンダリング時に

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

。代わりに、バンドルの生の内容へのリンクをレンダリングします(あなたの場合はboostrapです。)。

この動作を無効にして、常にBundleTable.EnableOptimizations = trueを設定して最適化を実行できます。これにより、レンダリングメソッドは常にバンドル/縮小を行います。

+0

これを特定のバンドルに設定できますか? – PlTaylor

+0

現在のところ、これはグローバルスイッチではなく、アプリケーション全体のバンドル/ Minficationをオン/オフにします。 –

+1

プロパティ名がEnalbeOptimizationsではなくEnableOptimizationsであると仮定して投稿を編集しました。 StackOverflowは1つの文字編集を許可していません。:-( –

4

私はドットなしのweb.configファイルに.lessファイル

を提供させることによって対処することができます:

<handlers> 
    <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" /> 
    </handlers> 
関連する問題