Virtual paths when creating packages in MVC?

Question

I am creating a package for 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, since there is a real ~/Content/CSS directory, therefore there is a problem of name collision, and as a result, it does not find css and does not apply styles. So I changed the virtual path to ~/Content/styles/css and it works. So I'm a little confused here, how does the virtual path work here?

Answer 1

It is better to use this virtual path "~ / Content / CSS / someName" because "someName" css will have the same path as the real abc.css. In other words, the virtual path of the bundle is not only the path, it is the path and filename (in my example, the file name is "someName")

Then you set the web.config compilationDebug file to false in the browser, you will see the virtual paths of your packages. For browsers, these are URLs for css or js files.

Why is it better to have the same path for real css and bundled? Due to relative resource paths in css (img, fonts, etc.).

Example: you have the style background-image: url (images / 1.jpg); in Content / CSS / abc.css and use the virtual path ~ / Content / styles / css for your package. As a result, you get 404 for the image, because the browser requests the image at the URL: /Content/styles/images/1.jpg instead of / Content / css / images / 1.jpg

If you enable css with different paths in the same package, use CssRewriteUrlTransformation.

And yes, in your example, you came across name collisions because virtual css as a result has the same url as the real folder.