Virtual paths in creating bundles in MVC?

Question

I am creating bundle for both script and style in my mvc application.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/CSS/abc.css"));

In this case as there exist a real directory ~/Content/CSS, so there is name collision problem and as result it does not find the css and fails to apply styles. So i changed virtual path to ~/Content/styles/css and it works. So i am little confused here, how does virtual path work here?

Answer 1

It'll be better for your using that virtual path "~/Content/CSS/someName", because "someName" css will have same path like real abc.css. In other words virtual path of bundle is not only a path is a path and fileName (in my example file name is "someName")

Then you set in web.config compilationDebug to false in browser you'll see your bundles virtual paths. For browsers it is urls to css or js files.

Why is better to have same path for real css and bundled? Because of relative paths to resources in css (img, fonts etc.).

Example: you have style background-image: url(images/1.jpg); in Content/CSS/abc.css and use virtual path ~/Content/styles/css for your bundle. In result you get 404 for image because browser will request image by url: /Content/styles/images/1.jpg instead of /Content/css/images/1.jpg

If you include css with different paths in same bundle use CssRewriteUrlTransformation.

And yes you got name collisions in your example, because virtual css in result have same url like a real folder.