Question

我在布局中包含了这些css文件

<!-- Dropdown Menu -->
<link rel="stylesheet" href="~/Content/superfish.css">
<!-- Date Picker -->
<link rel="stylesheet" href="~/Content/bootstrap-datepicker.min.css">
<!-- CS Select -->
<link rel="stylesheet" href="~/Content/cs-select.css">
<link rel="stylesheet" href="~/Content/cs-skin-border.css">
<!-- Themify Icons -->
<link rel="stylesheet" href="~/Content/themify-icons.css">
<!-- Flat Icon -->
<link rel="stylesheet" href="~/Content/flaticon.css">
<!-- Icomoon -->
<link rel="stylesheet" href="~/Content/icomoon.css">
<!-- Flexslider  -->
<link rel="stylesheet" href="~/Content/flexslider.css">
<!-- Style -->
<link rel="stylesheet" href="~/Content/style.css">

现在我想在bundle中移动这些文件，所以我这样做了：

public static void RegisterBundler(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/Content/style.css").Include(
            "~/Content/superfish.css",
            "~/Content/bootstrap-datepicker.min.css",
            "~/Content/cs-select.css",
            "~/Content/cs-skin-border.css",
            "~/Content/themify-icons.css",
            "~/Content/flaticon.css",
            "~/Content/icomoon.css",
            "~/Content/flexslider.css",
            "~/Content/style.css"
            ));

        BundleTable.EnableOptimizations = true;
    }

在我的布局中：

@Styles.Render("~/Content/style.css")

但是从这个：

它是这样的：

当我打开这个新的css文件（来自浏览器开发人员工具）时，某些css代码丢失了。特别是整个第一个文件丢失（superfish.css），但它与其他文件夹在同一个文件夹中

我错了什么？

Answer 1

它可能会混淆并呈现实际的style.css而不是捆绑。尝试将捆绑包的名称更改为其他名称，即新StyleBundle("~/Content/main.css")。此外，您可能使用渲染错误 - 它应该是@Styles.Render("~/Content/style")（请注意已删除的.css部分）

Answer 2

捆绑是ASP.NET 4.5中的一项新功能，可以轻松地将多个文件合并或捆绑到一个文件中。

Bundle类Include方法接受一个字符串数组，其中每个字符串都是资源的虚拟路径。

更改您的代码，如下所示：

注意：删除StyleBundle（）

中的文件扩展名

public static void RegisterBundler(BundleCollection bundles)
    {
       //

        bundles.Add(new StyleBundle("~/Content/style").Include(
            "~/Content/superfish.css",
            "~/Content/bootstrap-datepicker.min.css",
            "~/Content/cs-select.css",
            "~/Content/cs-skin-border.css",
            "~/Content/themify-icons.css",
            "~/Content/flaticon.css",
            "~/Content/icomoon.css",
            "~/Content/flexslider.css",
            "~/Content/style.css"
            ));

        BundleTable.EnableOptimizations = true;
    }

布局：如下所示调用

@ Styles.Render（ “〜/内容/风格”）

希望它有用

Bundle对于css来说是错误的

2 个答案: