Synopsis:
If StyleBundle or ScriptBundle virtual path is not configured to a valid (virtual) path, css/js files with relative reference links will be broken.Remedy:
Tip 1:In BundleConfig.cs and in invoking .Render methods in .cshtml, use the actual (virtual) path:
- bundles.Add(new StyleBundle("~/Content/themes/main/css").Include("~/Content/themes/main/style.css"));
- @Styles.Render("~/Content/themes/main/css ")
Avoid bundling files that aren't located in the same directory
Other things that helped me:
- Be sure to activate Bundle functionality in BundleConfig.cs or Web.config:
- BundleConfig.cs: BundleTable.EnableOptimizations = true;
- Web.config:
- Turn off bundling until deploying to production (it is easier to debug js)
Details:
I'm building my first production app in MVC 4 and exploring the new Bundles functionality. Bundles is a great feature for optimizing applications for fast downloading. Once it is configured, it minifies JavaScript and CSS file by doing things such as removing whitespace and even shortening variable names to make it as compact as possible. It will even bundle (thus the name) css and js files into single files for even greater efficiencies.When I first bundled my files together, I found I was missing images that were linked relative to my stylesheets. After some digging I found it isn't a good idea to use a fake virtual path when declaring a StyleBundle for the bundles collection. Fake virtual paths are ok, as long as the css or js file does not reference a relative file.
