为什么我的样式包在ASP.NET MVC 4中无法正确呈现?

时间:2012-09-21 15:30:38

标签: asp.net-mvc asp.net-mvc-4

所以我是ASP.NET MVC 4的新手(好吧,我稍微使用了3)。

无论如何,在我的BundleConfig.cs文件中,我正在尝试加载Twitter Bootstrap css文件和一个额外的site.css文件。

但只渲染了site.css文件。我已经确认bootstrap css文件确实位于正确的位置(Content文件夹)并且与site.css位于相同的位置

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.min.css",
            "~/Content/bootstrap-responsive.min.css",
            "~/Content/site.css"));

修改

好的,这不是我喜欢的方式,但Andrei Drynov建议我尝试:

@import url("bootstrap.min.css")
body{background: #e8e6da;padding-top:60px;padding-bottom:40px;}
@import url("bootstrap-responsive.min.css")

但这不起作用。我将site.css更改为上面但现在背景体颜色甚至不起作用。如果我删除@imports,背景是正确的颜色。

编辑2

我不明白,但是补充道:

bundles.IgnoreList.Clear();

我的bundle文件修复了它。嗯。不确定我理解。但是我能够将@imports从site.css中移除。

奇怪。

4 个答案:

答案 0 :(得分:87)

默认行为是IgnoreList忽略任何缩小的脚本。

您可以从名称中删除“.min”,也可以清除“忽略列表”。

答案 1 :(得分:15)

只是为了让其他人知道谁在这个长线程中无法轻易找到工作解决方案,我遇到了完全相同的问题,我解决它的方式与实际问题底部的编辑建议相同!

我启动了一个新项目MVC4 Web应用程序,使用上面显示的完全相同的代码为bootstrap包创建路由:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.min.css",
            "~/Content/bootstrap-responsive.min.css",
            "~/Content/site.css"));

但由于原因未知,它没有加载..最后我放弃了,决定谷歌搜索并找到这个页面。

我尝试在BundleConfig.cs文件中添加以下内容作为第一行。重新编译,一切都开始工作,现在正在加载样式。

bundles.IgnoreList.Clear();

也许这有助于某人。

答案 2 :(得分:2)

我不使用bundle for Bootstrap(作为例外),但它的缩小版本,所以这对我有用:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")">
    <style>
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    </style>
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-responsive.min.css")">
    @Styles.Render("~/Content/less")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>

内联样式的部分来自http://www.initializr.com/顶部NavBar,如果您不需要,只需删除。

或者,您可以在styles.css文件中执行相同的操作:

@import url('bootstrap.min.css');

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

@import url('bootstrap-responsive.min.css');

You CSS Code below

答案 3 :(得分:1)

正如paul所说,捆绑设置为自动忽略'min'文件。但是忽略这个规则是一种不好的做法,请参考这个答案Bundler not including .min files以获得更好的解决方案(检查第一和第二个答案)。