如何在C#中打包CSS时合并同选择器（如body）的样式？

嘿，我懂你的困扰——默认的StyleBundle其实只是把CSS文件简单拼接在一起，并不会智能合并相同选择器的属性，更不会自动处理属性优先级覆盖的问题。要实现你想要的效果，咱们得用专门的CSS优化工具增强Bundle的功能，这里推荐用BundleTransformer配合YUI Compressor来搞定。

下面是具体的操作步骤：

1. 安装必要的NuGet包 #

首先，你需要在Package Manager Console里运行这些命令，安装BundleTransformer核心包以及CSS处理、压缩相关的依赖：

Install-Package BundleTransformer.Core
Install-Package BundleTransformer.Css
Install-Package BundleTransformer.Yui

2. 修改BundleConfig配置 #

打开你的BundleConfig.cs文件，替换原来的StyleBundle配置，改用BundleTransformer的处理逻辑：

先添加必要的命名空间引用：

using BundleTransformer.Core.Builders;
using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;
using System.Web.Optimization;

然后修改Bundle的创建代码：

// 初始化CSS转换器和配套组件
var cssTransformer = new CssTransformer();
var nullBuilder = new NullBuilder();
var cssOrderer = new NullOrderer();

// 创建自定义Bundle并应用转换器
bundles.Add(new Bundle("~/Content/cssTest")
    .Include("~/Content/Css1.css", "~/Content/Css2.css")
    .Transform(cssTransformer)
    .Orderer(cssOrderer));

3. 验证最终效果 #

这样配置后，当你运行项目加载打包后的CSS时，两个body选择器会被自动合并成一个，并且属性会按照文件顺序覆盖（因为Css2.css在后面，所以color:red会替换Css1.css里的color:darkred），最终得到你期望的结果：

body { font-size:larger; color:red; margin-left:15px; margin-bottom:100px; }

这个方法能生效的原因是：BundleTransformer会调用YUI Compressor处理CSS，它不仅会压缩代码，还能自动合并相同选择器，同时遵循CSS优先级规则处理重复属性——后加载文件中的属性会覆盖先加载的。

内容的提问来源于stack exchange，提问作者Rock