捆绑来自不同文件夹的样式表和脚本

Question

在 ASP.NET MVC5 应用程序中，我有多个 CSS 和 JS 文件，我试图使用以下代码将它们捆绑在一起[=13=]

bundles.Add(new StyleBundle("~/myBundles/css").Include(
          "~/lib/css/nivo-slider.css",
          "~/css/core.css",
          "~/css/shortcode/shortcodes.css",
          "~/style.css",
          "~/css/responsive.css",
          "~/css/color/color-core.css",
          "~/css/custom.css",
          "~/myDefaultSS.css"
          ));

我在 _Layout 页面中使用它是这样的：

@Styles.Render("~/myBundles/css")

使用时，我在页面的hmlt源代码中看到如下

<link href="/myBundles/css?v=xt5fim6H60Umm4DuM_5iVudeIEOkrcbgXzG0o3CHtlU1" rel="stylesheet"/>

使用它后，我的网页无法正常显示。我认为这是因为我捆绑了来自不同目录的文件。那正确吗？我该如何解决这个问题？

Answer 1

捆绑样式时不要使用 @import css 指令。如果您发布站点的发布版本，则它不起作用。如果您检查网络流量 [F12]，您会看到在网络上找不到导入的 css 文件，因为优化没有将 @import url 替换为正确的路径。

所以，不要使用导入的捆绑 css-files 或者关闭捆绑优化并通过其他方式优化它们。

可以通过 Web.Config 中的以下行关闭优化：

<compilation debug="true" targetFramework="4.5"/>

此外，您可以在 C# 中使用此代码：

BundleTable.EnableOptimizations = false;

[Reference]

捆绑来自不同文件夹的样式表和脚本

Bundling Style Sheets and Scripts from Different Folders

css

asp.net-mvc

bundle

bundling-and-minification