8

I'm currently using ASP.NET MVC 4 CSS/JavaScript Optimizer. It works good with my own CSS/JavaScript, but I also want to use it with plugins. Each plugin has its own folder:

~/Content/css // my own css, ok
~/Content/plugins/rateit
~/Content/plugins/chosen
~/Content/plugins/...

I can add this files to optimizer:

var bundle = new Bundle("~/Content/opt", new CssMinify());
...
bundle.AddFile("~/Content/plugins/chosen/chosen.css", "*.css");
BundleTable.Bundles.Add(bundle);

But in this case, after optimization, css is in another folder and browser cannot find background images anymore. Is there any solution to automatically modify css path for background images?

I can copy all plugins in one folder, but with a lot of plugins, it's not a good idea.

user1224129
  • 2,759
  • 3
  • 27
  • 29

2 Answers2

4

I had the same problem... I used to bundle jQuery UI CSS with my own, but as you mentioned, plug-ins uses it's own directory. In my case it was:

~/Content/Site.css
~/Content/themes/base/*.css

This minified bundle looks for all images in ~/Content/ so the jQuery UI stops working properly. So the only way to resolve this is to separate these CSS (my own and the jQuery UI one).

BTW: Before that, I didn't understand why the CSS are bundled (in MVC4 template) as ~/content/ instead of ~/bundles/. Now I know that it is because of problem with path to the images in Content directory.

Hubo
  • 161
  • 1
  • 11
  • 1
    @hobo i followed your suggestion and my image path issue was resolved, for all others having the same issue I would recommend keeping the same bundle name as the path but adding another "/css" at the end of the bundle name. So if the path would be- "~/content/css" the bundle name should be- "~/content/css/css", this would help in resolving the relative path issues of the images. – Manik Arora Jan 23 '15 at 11:34
4

Might have a look at RequestReduce. It's another .net based minifier/bundler and it will rewrite all urls in the minified/bundled css to be absolute. This includes fonts and background images. It will also automatically expand any imports in the css. Additionally, where it thinks it can, it will sprite the background images.

Matt Wrock
  • 6,590
  • 29
  • 23
  • I already used RequestReduce. It works perfect, except some very small part of JavaScript not worked anymore. With MVC 4 minification I don't have this problem, but I cannot minimize plugins either. – user1224129 Mar 20 '12 at 14:51
  • It would be great if you could add an issue to the RequestReduce issues at https://github.com/mwrock/RequestReduce/issues so I can work on fixing that javascript problem. – Matt Wrock Mar 20 '12 at 15:48
  • 1
    I roll back my code to the old version with RequestReduce. After long search I found this small part of JavaScript didn't work because of Bug in Chrome with Adblock. With a small fix it works fine. So it's not RequestReduce bug :-) – user1224129 Mar 22 '12 at 21:45
  • 1
    @MattWrock - It is required that you disclose your affiliation with this product in your answers, see [the FAQ - May I promote here?](http://stackoverflow.com/faq#promotion). That being said, RequestReduce looks like a good fit for this problem. Another popular alternative to the built-in bundling is [Cassette](http://getcassette.net/). – Jesse Webb Feb 08 '13 at 17:14
  • Why not modify the CSS routes to be absolute in regard to the site root? simple find replace on a couple of files – amhed Feb 17 '13 at 21:45
  • Does RequestReduce create a new bundle per webpage? If so, this is a disadvantage since for each webpage browser will be downloading a new file. In ASP.NET Web.Optimization you can create a common bundle (ex. for homepage) and it will be already cached by the browser for all other site pages, not requested again. Will be good to see a comparison between RequestReduce and ASP.NET Web.Optimization. – Ricardo stands with Ukraine Sep 25 '13 at 10:31
  • Requestreduce creates a bundle per unique combination of css or unique combination of js on a page. So if many pages have the same CSS then they use the same css bundle or if it is the same block of Js then they use the same js bundle. – Matt Wrock Sep 26 '13 at 16:02