Question

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

我的ASP.NET应用程序有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中会在主题名称的末尾附加一个唯一的查询字符串

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

1 个答案: