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.
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;
- Turn off bundling until deploying to production (it is easier to debug js)
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.