ASPNET MVC5 Web应用程序
通过实施BundleConfig,我不断获得意想不到的结果。
的Global.asax.cs
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/bundlejquery").Include(
"~/Scripts/jquery-1.12.4.min.js",
"~/Scripts/jquery-ui-1.12.1.min.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js",
"~/Scripts/jquery.mobile.custom.min.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/respond.min.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/jquery.mobile.custom.structure.min.css",
"~/Content/jquery.mobile.custom.theme.min.css",
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
这是一个包含轮播的视图:我根据使用或不使用BundleConfig获得不同的css输出。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@*@Styles.Render("~/Content/css")*@
<link rel="stylesheet" href="~/Content/jquery.mobile.custom.structure.min.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile.custom.theme.min.csss" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/site.css" />
<link rel="stylesheet" href="~/Content/StepBar.css">
<link rel="stylesheet" href="~/Scripts/jquery-ui-themes-1.12.1/themes/base/jquery-ui.min.css" />
@Scripts.Render("~/bundles/bundlejquery")
</head>
输出(正如预期的那样,轮播img是水平居中的)
现在我只是REM前4个链接和Un-REM @ Styles.Render(“〜/ Content / css”)
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@Styles.Render("~/Content/css")
@*<link rel="stylesheet" href="~/Content/jquery.mobile.custom.structure.min.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile.custom.theme.min.csss" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/site.css" />*@
<link rel="stylesheet" href="~/Content/StepBar.css">
<link rel="stylesheet" href="~/Scripts/jquery-ui-themes-1.12.1/themes/base/jquery-ui.min.css" />
@Scripts.Render("~/bundles/bundlejquery")
</head>
我不希望html输出发生变化,因为我只用BundleConfig类中的引用替换了这4个样式表。 然而,输出有些不同:
现在轮播图片左对齐。 这意味着替换不等同于4个原始样式表:它怎么可能?