Visual Studio 构建/发布时如何删除CSS文件中的空行？

可以直接在现有WebCompiler工作流基础上实现需求，无需更换编译工具，以下两种方案均支持嵌入VS构建/发布流程自动执行：

方案1：MSBuild 自定义任务（无额外依赖，推荐） #

该方案直接嵌入VS原生构建管道，本地构建、发布操作都会自动触发，无需修改WebCompiler原有配置：

• 右键你的项目，选择「卸载项目」，再次右键选择「编辑项目文件」打开.csproj（Web项目为.pubxml发布配置文件）
• 在文件末尾</Project>标签前插入以下配置：

<Target Name="RemoveCssEmptyLines" AfterTargets="WebCompiler">
  <ItemGroup>
    <!-- 按需修改路径规则，匹配你的WebCompiler输出CSS的目录 -->
    <GeneratedCss Include="wwwroot\css\**\*.css" />
  </ItemGroup>
  <!-- 兼容所有VS版本的PowerShell实现 -->
  <Exec Command="powershell -Command &quot;(Get-Content '%(GeneratedCss.FullPath)') | Where-Object { $_.Trim() -ne '' } | Set-Content '%(GeneratedCss.FullPath)' -Encoding UTF8&quot;" />
</Target>

• 保存文件后重新加载项目即可，后续所有构建、发布操作都会在sass编译完成后自动删除CSS内的空行

方案2：WebCompiler 后置钩子（配置更灵活） #

如果需要针对单个sass文件单独配置空行删除规则，可以用WebCompiler自带的postCompile钩子实现：

• 项目根目录新建remove-css-empty-lines.js文件，写入以下内容：

const fs = require('fs');
// 读取传入的CSS文件路径参数
const targetCss = process.argv[2];
const content = fs.readFileSync(targetCss, 'utf8').replace(/^\s*[\r\n]/gm, '');
fs.writeFileSync(targetCss, content, 'utf8');

• 打开WebCompiler的配置文件compilerconfig.json，给对应sass编译规则添加后置执行命令：

{
  "inputFile": "样式文件路径/xxx.scss",
  "outputFile": "输出路径/xxx.css",
  // 新增这一行，路径和输出CSS路径保持一致
  "postCompile": "node remove-css-empty-lines.js 输出路径/xxx.css"
}

注意事项 #

• 如果需要保留CSS中的注释行、仅删除纯空白行，可将正则替换规则调整为/^[\s]*(\n|\r\n)/gm
• 两种方案均只会处理编译生成的CSS文件，不会修改原sass源码

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