In my MVC5.1 project I'm using bundling and minification with CSS rewriting transformation:
styleBundle.Include("~/Content/Site.css", new CssRewriteUrlTransform()); bundles.Add(styleBundle);
CssRewriteUrlTransform
converts image paths relative to the root of the site. But, when I images embedded into css:
span.file { background-image: url(data:image/png;base64,iVBORw0KGg+...2AAAAElFTkSuQmCC); }
this is getting translated into
span.file { background-image: url(http://localhost:52253/Content/data:image/png;base64,iVBORg...mCC); }
And obviously ~/Content/data:image/png;base64...
does not exist.
Any way to stop this happening, other than update CSS files to not include embedded images? Or separate into different CSS files, where with actual URL are used and URL-transform this files. And another css with only embedded images.
Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time. Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)
MVC implements a process called minification on the bundled files. Minification removes all whitespace and renames variables to their shortest possible name, thereby removing all excess characters (and thereby excess file size) from the bundle. Because the file is smaller, it takes less time to download.
You can create style or script bundles in BundleConfig class under App_Start folder in an ASP.NET MVC project. (you can create your own custom class instead of using BundleConfig class, but it is recommended to follow standard practice.)
Bundling is the process of rolling up a number of distinct resources together into a single downloadable resource. For example, a bundle may consist of multiple JavaScript or CSS files you bring down to the local machine by making a single HTTP request to an ad hoc endpoint.
Scrap that question. This is a known bug. Currently work around is to separate your css into embedded images and images via url.
Vote for these work-items: https://aspnetoptimization.codeplex.com/workitem/88 and https://aspnetoptimization.codeplex.com/workitem/108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With