Łączenie MVC4 CSS nie powiodło się Nieoczekiwany token, znaleziony "@import"

Question

Próbuję użyć łączenia, aby połączyć & zminimalizować niektóre pliki CSS. W moim Global.aspx.cs Application_Start mam następujące:

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

I w moim .cshtml pliku mam następujące:

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

Jednak, kiedy zobaczyć źródło mojego pliku wiązki CSS , ma następujące elementy:

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

.... wiele innych

Wszelkie pomysły na nowo rozwiązać to?

zrobiłem sprowadzić do następującej linii:

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

Jeśli mam tylko tę linię kodu dostaję te same błędy.

Answer 1

Istnieje kilka kwestii tutaj:

1. Kwestia css to spowodowane tym jquery.ui.all.css, jako domyślny minifier nie obsługuje następujące importu, a to nie to, co jest chcesz zrobić tak czy inaczej, ponieważ podwoiłoby to wszystkie pliki jquery ui css. Więc co chcesz zrobić, zamiast nie używać * .css, a zamiast jawnie listy plików co jquery ui chcesz dołączyć:

   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. drugie chcesz używać metody Script/Styles.Render zamiast jawne odwoływanie się do adresu URL pakietów, tak jak to robisz, ponieważ pomocnicy nie będą automatycznie pakować/minimalizować i renderować indywidualnych odwołań do każdego skryptu/zasobu stylów w trybie debugowania, a także dodawać odcisk palca do zawartości pakietu w adresie URL, aby buforowanie działaj dobrze.

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

3. Można również użyć StyleBundle/ScriptBundle który jest cukier tylko syntaxtic za nie konieczności przechodzenia w nowym CSS/JsMinify.

Można również sprawdzić ten poradnik, aby uzyskać więcej informacji: Bundling Tutorial

Answer 2

Albo co można zrobić, to napisać własny BundleTransform dla CssMinify jeśli oczywiście trzeba taką elastyczność. Tak więc, na przykład kod w BundleConfig.cs wygląda następująco:

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

Więc co trzeba dodać to:

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

A jeśli potrzebujesz trochę więcej naprawia/błędy można rozszerzyć tę logikę w Metoda FixCustomCssErrors.