51

バンドルを使用して、いくつかのCSSファイルを結合および縮小しようとしています。私のGlobal.aspx.csApplication_Startには、次のものがあります。

    var jsBundle = new Bundle("~/JSBundle", new JsMinify());
    jsBundle.AddDirectory("~/Scripts/", "*.js", false);
    jsBundle.AddFile("~/Scripts/KendoUI/jquery.min.js");
    jsBundle.AddFile("~/Scripts/KendoUI/kendo.web.min.js");
    BundleTable.Bundles.Add(jsBundle);

    var cssBundle = new Bundle("~/CSSBundle", new CssMinify());
    cssBundle.AddDirectory("~/Content/", "*.css", false);
    cssBundle.AddDirectory("~/Content/themes/base/", "*.css", false);
    cssBundle.AddFile("~/Styles/KendoUI/kendo.common.min.css");
    cssBundle.AddFile("~/Styles/KendoUI/kendo.default.min.css");
    BundleTable.Bundles.Add(cssBundle);

そして、私の.cshtmlファイルには次のものがあります。

<link href="/CSSBundle" rel="stylesheet" type="text/css" />
<script src="/JSBundle" type="text/javascript"></script>

ただし、バンドルCSSファイルのソースを表示すると、次のようになります。

/* Minification failed. Returning unminified contents.
(40,1): run-time error CSS1019: Unexpected token, found '@import'
(40,9): run-time error CSS1019: Unexpected token, found '"jquery.ui.base.css"'

.... さらに多く

これを解決する方法について何かアイデアはありますか？

私はそれを次の行に絞り込みました：

cssBundle.AddDirectory("~/Content/themes/base/", "*.css", false);

そのコード行しかない場合、同じエラーが発生します。

4

2 に答える 2

48

ここにはいくつかの問題があります。

  1. デフォルトのミニファイアは次のインポートをサポートしていないため、cssの問題はjquery.ui.all.cssが含まれていることが原因です。これは、すべてのjqueryuicssファイルが二重に含まれるためとにかくやりたいことではありません。したがって、代わりに実行したいのは* .cssを使用せず、代わりに含めるjqueryuiファイルを明示的にリストすることです。

     bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
        "~/Content/themes/base/jquery.ui.core.css",
        "~/Content/themes/base/jquery.ui.resizable.css",
        "~/Content/themes/base/jquery.ui.selectable.css",
        "~/Content/themes/base/jquery.ui.accordion.css",
        "~/Content/themes/base/jquery.ui.autocomplete.css",
        "~/Content/themes/base/jquery.ui.button.css",
        "~/Content/themes/base/jquery.ui.dialog.css",
        "~/Content/themes/base/jquery.ui.slider.css",
        "~/Content/themes/base/jquery.ui.tabs.css",
        "~/Content/themes/base/jquery.ui.datepicker.css",
        "~/Content/themes/base/jquery.ui.progressbar.css",
        "~/Content/themes/base/jquery.ui.theme.css"));

  2. 次に、デバッグモードのときにヘルパーが各スクリプト/スタイルアセットへの個々の参照を自動的にバンドル/縮小およびレンダリングしないため、バンドルURLを明示的に参照するのではなく、Script/Styles.Renderメソッドを使用する必要があります。また、バンドルコンテンツのフィンガープリントをURLに追加して、ブラウザのキャッシュが適切に機能するようにします。

    @Scripts.Render("~/JSBundle") and @Styles.Render("~/CSSBundle")

  3. また、新しいCss/JsMinifyを渡す必要がないための単なる構文上の砂糖であるStyleBundle/ScriptBundleを使用することもできます。

詳細については、このチュートリアルを確認することもできます： バンドルチュートリアル

于 2012-08-28T20:33:35.073 に答える
10

または、もちろんそのような柔軟性が必要な場合は、CssMinify用に独自のBundleTransformを作成することもできます。したがって、たとえばBundleConfig.csのコードは次のようになります。

using System;
using System.Web.Optimization;
using StyleBundle = MyNamespace.CustomStyleBundle;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/Content/themes/base/css")
            .IncludeDirectory("~/Content/themes/base", "*.css"));
    }
}

次に、追加する必要があるのは次のとおりです。

public class CustomStyleBundle : Bundle
{
    public CustomStyleBundle(string virtualPath, IBundleTransform bundleTransform = null)
        : base(virtualPath, new IBundleTransform[1]
            {
                bundleTransform ?? new CustomCssMinify()
            })
    {
    }

    public CustomStyleBundle(string virtualPath, string cdnPath, IBundleTransform bundleTransform = null)
        : base(virtualPath, cdnPath, new IBundleTransform[1]
            {
                bundleTransform ?? new CustomCssMinify()
            })
    {
    }
}

public class CustomCssMinify : IBundleTransform
{
    private const string CssContentType = "text/css";

    static CustomCssMinify()
    {
    }

    public virtual void Process(BundleContext context, BundleResponse response)
    {
        if (context == null)
            throw new ArgumentNullException("context");
        if (response == null)
            throw new ArgumentNullException("response");
        if (!context.EnableInstrumentation)
        {
            var minifier = new Minifier();
            FixCustomCssErrors(response);
            string str = minifier.MinifyStyleSheet(response.Content, new CssSettings()
            {
                CommentMode = CssComment.None
            });
            if (minifier.ErrorList.Count > 0)
                GenerateErrorResponse(response, minifier.ErrorList);
            else
                response.Content = str;
        }
        response.ContentType = CssContentType;
    }

    /// <summary>
    /// Add some extra fixes here
    /// </summary>
    /// <param name="response">BundleResponse</param>
    private void FixCustomCssErrors(BundleResponse response)
    {
        response.Content = Regex.Replace(response.Content, @"@import[\s]+([^\r\n]*)[\;]", String.Empty, RegexOptions.IgnoreCase | RegexOptions.Multiline);
    }

    private static void GenerateErrorResponse(BundleResponse bundle, IEnumerable<object> errors)
    {
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.Append("/* ");
        stringBuilder.Append("CSS Minify Error").Append("\r\n");
        foreach (object obj in errors)
            stringBuilder.Append(obj.ToString()).Append("\r\n");
        stringBuilder.Append(" */\r\n");
        stringBuilder.Append(bundle.Content);
        bundle.Content = stringBuilder.ToString();
    }
}

さらに修正/エラーが必要な場合は、FixCustomCssErrorsメソッドでこのロジックを拡張できます。

于 2013-02-25T18:17:20.253 に答える