css - example - MVC Bundling and Minification: convierte imágenes incrustadas a rutas de URL

bundles asp net mvc 4

Question

En mi proyecto MVC5.1 estoy usando agrupación y minificación con transformación de reescritura de CSS:

styleBundle.Include("~/Content/Site.css", new CssRewriteUrlTransform());
bundles.Add(styleBundle);

CssRewriteUrlTransform convierte las rutas de imagen en relación con la raíz del sitio. Pero, cuando las imágenes incrustadas en css:

span.file {
  background-image: url(data:image/png;base64,iVBORw0KGg+...2AAAAElFTkSuQmCC);
}

esto se está traduciendo en

span.file {
  background-image: url(http://localhost:52253/Content/data:image/png;base64,iVBORg...mCC);
}

Y obviamente ~/Content/data:image/png;base64... no existe.

¿Alguna forma de evitar que esto suceda, aparte de actualizar los archivos CSS para no incluir imágenes incrustadas? O sepárelos en diferentes archivos CSS, donde con la URL real se usan y los archivos se transforman mediante URL. Y otro css con solo imágenes incrustadas.

Answer 1

Deseche esa pregunta. Este es un error conocido. Actualmente, el trabajo consiste en separar su css en imágenes incrustadas e imágenes mediante url.

Vote por estos elementos de trabajo: https://aspnetoptimization.codeplex.com/workitem/88 y https://aspnetoptimization.codeplex.com/workitem/108

Answer 2

Si no desea extraer las imágenes incrustadas en archivos reales y no puede esperar por una nueva versión del nuget Microsoft.AspNet.Web.Optimization, puede usar la siguiente clase.

Es una copia literal de CssRewriteUrlTransform, excepto que ignora (crudamente;)) las URL con la sintaxis de URI de datos.

Gist: https://gist.github.com/janv8000/fa69b2ab6886f635e3df

/// <remarks>Part of Microsoft.AspNet.Web.Optimization.1.1.3, forked to ignore data-uri</remarks>
public class CssRewriteUrlTransformIgnoringDataUri : IItemTransform
{
    internal static string RebaseUrlToAbsolute(string baseUrl, string url)
    {
        if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase))
            return url;
        if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase))
            baseUrl = baseUrl + "/";
        return VirtualPathUtility.ToAbsolute(baseUrl + url);
    }

    internal static string ConvertUrlsToAbsolute(string baseUrl, string content)
    {
        if (string.IsNullOrWhiteSpace(content))
        { return content; }

        return new Regex("url//([''/"]?(?<url>[^)]+?)[''/"]?//)").Replace(content, match =>
        {
            var format = match.Groups["url"].Value;
            if (format.StartsWith("data:image", StringComparison.CurrentCultureIgnoreCase))
            {
                return format;
            }

            return "url(" + RebaseUrlToAbsolute(baseUrl, format) + ")";
        });
    }

    public string Process(string includedVirtualPath, string input)
    {
        if (includedVirtualPath == null)
        {
            throw new ArgumentNullException("includedVirtualPath");
        }
        return ConvertUrlsToAbsolute(VirtualPathUtility.GetDirectory(includedVirtualPath.Substring(1)), input);
    }
}

Answer 3

Verifique mi solución que he ''empaquetado'' muy bien en un paquete NuGet. https://github.com/benmccallum/AspNetBundling

De lo contrario, simplemente actualice a grunt / gulp;)