asp.net mvc 4 bundles and explicit file includes - css

Question

I am very confused, I just started to work on the CSS for my ASP.NET MVC4 website and I don't fully understand what is happening.
Currently my mobile layout works but any changes to it causes one strange effect after another. (e.g. the forms not being displayed to the ajax-loader.gif constantly being displayed.)
I have the following in .Layout.Mobile.cshtml
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I have modified the BundleMobileConfig.cs in App_start as follows:
// bundles.Add(new StyleBundle("~/Content/Mobile/css")
// .Include("~/Content/Site.Mobile.css"));
//kludge is the above wrong...and the following needed??
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/"));
I don't understand why this is NOT the default for this bundle?
Here are my questions / problems:
If you will note the stylesheets, I should not need to include the three explicit links, they should come from the bundles. But if delete any of them the site breaks.
Why won't the modified ~/Content/Mobile/css bundle pull up these css files?
For the script files I have looked at the code.jquery.com and I don't understand why I need these. My local code is the latest (i.e. jquery-1.9.1.js and jquery.mobile-1.2.0.js
I would expect that the version 1.9.1 shoud be able to replace the 1.7.1 without
problems, but it doesn't
The jquery.mobile.min.js should only be switching between a release and debug
vesion, which should not cause a problem, but it does.
I have used firebug to view what files are being loaded and I see that when I use just
the Render of the bundles without the explicit includes I don't get the files included, why not? I have read about bundles and it seems like I should just get the bundled files.
Can any one shed some light on what is happening and point me to a tutorial so I can learn
how to use how to debug CSS and bundles. I have read several and I find firebug very
useful, but I have no idea where to look next.

Answer 1

Try replacing your bundle code with this.
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/jquery.mobile*"));
This should load your files without explicitly doing so.

Answer 2

Your right this did work! Thanks....
The strange thing is that the following did not work:
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/jquery.mobile-{version}.js",
"~/Content/Mobile/css/jquery.mobile.theme-{version}.js",
"~/Content/Mobile/css/jquery.mobile.structure-{version}.js",
"~/Content/Mobile/css/"));
I understand why your example works...but don't understand why mine doesn't ... unless the version tag does not work like I expect it to....
Also I found out the jquery 1.9.1 is much different from 1.7.1 for this I had to do the following:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jquerymobile")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
this works....using your example I will figure out a wild card pattern to include this as well.