ASP.NET MVC4: How-To Bundling if Using Subdirectory

In ASP.NET MVC4, if you want to have your css files or javascript files well categorized into directory-directory, there are some problems when you want to publish the application. If you’re using bundleConfig like this:

[code language=”csharp” highlight=”3,9,13,14″]
bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/Scripts/jquery-ui.custom.js",
"~/Scripts/bootstrap/bootstrap.js",
"~/Scripts/jquery.flot.js",
"~/Scripts/jquery.flot.resize.js",
"~/Scripts/jquery.peity.js",
"~/Scripts/jquery.uniform.js",
"~/Scripts/jquery.jpanelmenu.js",
"~/Scripts/wcw/ckeditor.js"
));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap/bootstrap.css",
"~/Content/bootstrap/bootstrap-responsive.css",
"~/Content/jquery-ui.css",
"~/Content/jquery.gritter.css"
));
[/code]

there will be some problems, like the file not found because of the path, especially when in css using url('../<path to image or other files>') that using ../ as parent directory of current directory.

To tackle that problems, the bundleConfig should also show the true directory of sub directory, so the ../ will also work like in production. For example:

1. The css file test.css is located in Scripts folder, then it must be bundle like bundles.Add(new ScriptBundle("~/Scripts/[your chosen name, for example: app]').Include(
2. The css file bootstrap.css is located in Scripts/bootstrap folder, then it must be bundle like bundles.Add(new ScriptBundle("~/Scripts/bootstrap/[your chosen name, for example: bundle]').Include(

This is the sample solution of code above.

[code language=”csharp”]
bundles.Add(new ScriptBundle("~/Scripts/app").Include(
"~/Scripts/jquery-ui.custom.js",
"~/Scripts/jquery.flot.js",
"~/Scripts/jquery.flot.resize.js",
"~/Scripts/jquery.peity.js",
"~/Scripts/jquery.uniform.js",
"~/Scripts/jquery.jpanelmenu.js"
));

bundles.Add(new ScriptBundle("~/Scripts/bootstrap/bundle").Include(
"~/Scripts/bootstrap/bootstrap.js"
));

bundles.Add(new ScriptBundle("~/Scripts/wcw/ckeditor").Include(
"~/Scripts/wcw/ckeditor.js"
));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/jquery-ui.css",
"~/Content/jquery.gritter.css"
));

bundles.Add(new StyleBundle("~/Content/bootstrap/bundle").Include(
"~/Content/bootstrap/bootstrap.css",
"~/Content/bootstrap/bootstrap-responsive.css"
));
[/code]