【问题标题】:Adding bootstrap in bundleconfig doesn't work in asp.net mvc在 bundleconfig 中添加引导程序在 asp.net mvc 中不起作用
【发布时间】:2015-11-25 21:34:15
【问题描述】:

我遇到了一个问题,在我看来很奇怪。

我通过 nuget 包控制台安装了引导程序。

之后,在BundleConfig.cs 文件中,我将两个项目添加到bundles 列表中:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.min.js"));

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

当然,这些文件存在本地。

_Layout.cshtml 文件包含

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/bootstrap")

</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

但是当我看到一个视图(例如登录页面)时,我看到该捆绑包没有附加引导部分。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <link href="/Content/Site.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.6.2.js"></script>    
    <!-- I expect bootstrap here but it is not displayed -->
</head>
<body>

...

<script src="/Scripts/jquery-1.9.1.js"></script>
<!-- I expect bootstrap here but it is not displayed -->
</body>
</html>

【问题讨论】:

    标签: c# asp.net-mvc twitter-bootstrap asp.net-mvc-4


    【解决方案1】:

    使用Bundle时,不要附加.min

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

    基于调试设置,(主要是 web.config)

    • debug="true" - 将使用非缩小版本。
    • debug="false" - *.min.css 将被搜索,如果没有找到,将缩小当前

    web.config 设置:

    <system.web>
      <compilation debug="true"...
    

    【讨论】:

    • 你拯救了我的新年 :)。 .min. 影响了我的大脑 :)) 谢谢。
    • 这是一个不错的功能。但我觉得烦人的是,如果你不知道这一点,你就是在摸不着头脑。此外,除非您将调试设置为 true,否则您需要同时下载两者
    • 重要:调试时需要非最小文件。如果它不存在,则不会包含在内。
    猜你喜欢
    • 2018-07-12
    • 1970-01-01
    • 2018-06-07
    • 1970-01-01
    • 1970-01-01
    • 2018-07-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多