MVC4 bundling CSS a échoué. Jeton inattendu, trouvé "@import".

Question

Je suis en train d'utiliser le regroupement de combiner & minify CSS fichiers. Dans mon Global.aspx.cs Application_Start j'ai le texte suivant:

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

Et dans mon .cshtml fichier j'ai le texte suivant:

<link href="http://stackoverflow.com/CSSBundle" rel="stylesheet" type="text/css" />
<script src="/JSBundle" type="text/javascript"></script>

Cependant, quand j'ai vue la source de mon bundles fichier CSS, il est le suivant:

/* 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"'

.... beaucoup plus

Toutes les idées sur la façon de résoudre ce problème?

Je n'ai rétréci vers le bas à la ligne suivante:

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

Si je n'ai que la ligne de code j'obtiens les mêmes erreurs.

Answer 1

Il y a quelques questions ici:

1. La question css est due à l'inclusion de jquery.l'interface utilisateur.tous les.css, comme la valeur par défaut minifier ne prend pas en charge suivant les importations, et ce n'est pas ce que vous voulez faire, de toute façon, comme il le ferait double inclure l'ensemble de l'interface utilisateur de jquery css fichiers. Donc, ce que vous voulez faire à la place est de ne pas utiliser *.css, et, au lieu de la liste explicite de ce que jquery ui fichiers que vous souhaitez inclure:

    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. Deuxièmement, vous voulez utiliser le Script/Styles.Rendre méthodes plutôt qu'explicitement référence à la bundles url comme vous le faites, que les aides seront automatiquement pas de bundle/minify et de fournir des références pour chaque script/style actif en mode débogage, et également ajouter des empreintes digitales pour le contenu de l'ensemble dans l'url, donc mise en cache du navigateur fonctionnera propertly.

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

3. Vous pouvez également utiliser StyleBundle/ScriptBundle qui est juste syntaxtic de sucre pour ne pas avoir à passer au nouveau Css/JsMinify.

Vous pouvez également consulter ce tutoriel pour plus d'info: Groupement Tutoriel

Answer 2

Ou bien, vous pouvez écrire votre propre BundleTransform pour CssMinify si, bien sûr, vous avez besoin d’une telle flexibilité. Ainsi, par exemple, votre code dans BundleConfig.cs ressemble à:

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

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

}
 

Ensuite, vous devez ajouter ceci:

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

Et si vous avez besoin de quelques corrections / erreurs, vous pouvez étendre cette logique dans la méthode FixCustomCssErrors.