javascript - ASP.NET MVC5 我不想合并 CSS 文件

Question

我知道合并 CSS 文件会对网站的性能产生积极影响，但在我的情况下，我有以下情况。

我的 ASP.NET 应用程序有 4 个颜色主题

1. 默认
2. 红色
3. 紫色
4. 绿色

我写了一些 javascript 来启用或禁用网站上的样式表

$("link[href='/Content/Style.css']").removeAttr('disabled');
$("link[href='/Content/Purple.css']").attr('disabled', 'disabled');

当我在本地调试元素时工作正常。

问题出在我发布到 IIS 时。

显然 IIS 将 CSS 文件合并到一个文件中(见下文)，我的 javascript 无法工作，因为它找不到 CSS 链接。

<link href="/Content/styles?v=LJz1gcJyVEK_Atj5S7zoyR1lIdMwZ5IJIZn8ff329wQ1" rel="stylesheet">

有没有办法让 IIS 不合并 CSS 文件？

或者您对如何实现这个有什么更好的建议吗？

Answer 1

在您的元素中，您应该有一个包含类似以下内容的 App_Start/Bundling.cs 文件:

Bundle css = new StyleBundle("~/Content/styles");
css.IncludeDirectory("~/Content/", "*.css", true);

这会从内容目录中获取所有 CSS 文件并将它们捆绑到一个 CSS 文件中。这不仅将文件捆绑在一起，而且还缩小它们，因此值得将您的主题集成到其中，例如:

string[] themes = { "Default", "Red", "Purple", "Green" };
foreach (var themeName in themes)
{
    Bundle cssTheme = new StyleBundle("~/Theme/" + themeName);
    cssTheme.Include("~/Theme/" + themeName + ".css");
    bundleCollection.Add(cssTheme );
}

这将为您的每个主题创建一个包。然后，在您的 _Layout.cshtml 中，您可以像这样呈现包:

@{
    string[] themes = { "Default", "Red", "Purple", "Green" };
}
@Styles.Render(themes.Select(theme => "~/Theme" + theme).ToArray())

渲染时，您会看到打印出以下 HTML:

<link href="/Theme/Default" rel="stylesheet" type="text/css">
<link href="/Theme/Red" rel="stylesheet" type="text/css">
<link href="/Theme/Purple" rel="stylesheet" type="text/css">
<link href="/Theme/Green" rel="stylesheet" type="text/css">

允许您使用现有的 Javascript，例如:

$("link[href^='/Theme/Default']").removeAttr('disabled');
$("link[href^='/Theme/Purple']").attr('disabled', 'disabled');

请注意 attribute starts with selector 的使用，因为在生产环境中，ASP.NET 会将唯一的查询字符串附加到主题名称的末尾