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

Posted 2023-03-06

【中文标题】ASP.NET MVC5 我不想合并 CSS 文件

【英文标题】：ASP.NET MVC5 I don't want to merge CSS files

【发布时间】：2015-11-12 08:22:28

【问题描述】：

我知道合并 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 文件？

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

【问题讨论】：

IIS 不合并 CSS，ASP.NET 可以。您需要查看您的 Bundling.cs 文件并从样式包中删除必要的文件。您还需要更新布局以手动添加这些文件

您可以使用颜色主题创建几个捆绑包

RGaham 谢谢你，这确实有效，我从我的 Bundle 中删除了样式并将它们硬编码到 _Layout 中。

@Morpheus 你的意思是我为每个主题创建一个包。然后我使用 Javascript 来启用/禁用 Bundle？

@Christos312 完全正确

【参考方案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 会在主题名称的末尾附加一个唯一的查询字符串