c# - studio - MVC4 ha fallado el paquete CSS Error inesperado, se encontró ''@import''

scripts render bundles jqueryval

Question

Estoy tratando de usar la agrupación para combinar y minimizar algunos archivos CSS. En mi Global.aspx.cs Application_Start tengo lo siguiente:

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

Y en mi archivo .cshtml tengo lo siguiente:

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

Sin embargo, cuando veo la fuente de mi archivo CSS de paquetes, tiene lo siguiente:

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

.... mucho más

¿Alguna idea de como resolver esto?

Lo reduje a la siguiente línea:

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

Si solo tengo esa línea de código obtengo los mismos errores.

Answer 1

Hay algunos problemas aquí:

1. El problema de css se debe a que incluye jquery.ui.all.css, ya que el minificador predeterminado no admite las siguientes importaciones, y esto no es lo que quiere hacer de todos modos, ya que incluiría todos los archivos jquery ui css. Entonces, lo que quiere hacer en su lugar no es usar * .css, y en su lugar, enumerar explícitamente qué archivos de jquery ui desea incluir:

    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. En segundo lugar, desea utilizar los métodos Script / Styles.Render en lugar de hacer referencia explícita a la url de los paquetes mientras lo hace, ya que los ayudantes no agruparán / minificarán automáticamente y representarán referencias individuales a cada activo de estilo / secuencia de comandos en el modo de depuración, y También agregue una huella digital para el contenido del paquete en la URL para que el almacenamiento en caché del navegador funcione correctamente.

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

3. También puede usar StyleBundle / ScriptBundle que es solo azúcar sintáctica para no tener que pasar nuevos Css / JsMinify.

También puede consultar este tutorial para obtener más información: Tutorial de empaquetado

Answer 2

O lo que puede hacer es escribir su propio BundleTransform para CssMinify si, por supuesto, necesita tal flexibilidad. Entonces, por ejemplo, su código en BundleConfig.cs se ve así:

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

Entonces lo que necesitas agregar es:

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

Y si necesita más correcciones / errores, puede extender esta lógica en el método FixCustomCssErrors.