在 Visual Studio 的构建定义中包含 SASS 编译器？ （并避免在使用 TFS 时合并 CSS 文件）

Posted 2023-03-22

【中文标题】在 Visual Studio 的构建定义中包含 SASS 编译器？ （并避免在使用 TFS 时合并 CSS 文件）

【英文标题】：Include SASS compiler in build definition in Visual Studio? (and avoid merging the CSS files when using TFS)

【发布时间】：2020-05-31 16:17:00

【问题描述】：

我们计划很快在我们的 SharePoint 项目中使用 SASS 而不是纯 CSS。在测试和尝试设置所有内容时，我遇到了一些问题：

我们正在使用 Visual Studio 2015，在我的开发者机器上我安装了 Web Compiler Extension 以将 .scss 文件和部分文件编译为常规 .css -文件。

效果很好，但问题是，会有几个开发人员同时开发样式。我想避免每次有人尝试将某些内容签入源代码控制时合并生成的 css 文件（我们正在使用 Team Foundation Server）。

由于每次有人检查他们的更改时都会运行一个构建，并将生成的解决方案部署到夜间构建机器，因此想法是以某种方式将 SASS 编译器包含在构建定义中。这样，更具可读性的 scss 文件将被合并，并且构建会创建生成的 css 文件以将其包含在解决方案中。 也许我的想法太复杂了，但到目前为止我无法让它发挥作用。

有什么想法可以实现吗？ （也许我还应该提到，没有一台开发机器有任何互联网连接）

【问题讨论】：

***.com/questions/922798/…

【参考方案1】：

如果您正在构建 MVC 应用程序，则可以将 MVC 的捆绑功能与 SASS NuGet package 一起使用。而且，一定要启用缩小。 SassAndScssSettings 上有一个 UseNativeMinification 属性。这样，当您获取最新或签入时，您无需处理合并 css 文件。参考此线程：SASS/TFS best practice

另一种方法是在服务器上运行脚本（例如使用 PowerShell 任务）来安装 gulp 组件，然后调用 sass compile 任务来编译 SASS。详情请参考Powershell build - compiling SASS。

【讨论】：

如果你在构建服务器上安装了带有 Web 编译器扩展的 VS，它将能够在用户机器上编译相同的内容。然后，您在本地（在开发机器上）忽略 scss 编译器生成的 css，而不是将它们签入。然后在构建的构建端创建并捆绑它们。然后让开发人员只在 scss 文件中工作。