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

Question

We plan on using SASS instead of plain CSS for our SharePoint project very soon. While testing and trying to set everything up, I ran into some problems:

We're using Visual Studio 2015 and on my developer machine I installed the Web Compiler Extension to compile the .scss-files and partial files to a regular .css-file.

That worked very nicely but the problem is, that there will be a few developers working simultaneously on the styles. I want to avoid merging the resulting css-file each time someone tries to check in something into source control (we're using Team Foundation Server ).

Since there is a build running every time someone is checking in their changes, and to deploy the resulting solution to the nightly build machine, the idea was to somehow include the SASS compiler in the build definition. This way the more readable scss-files get merged and the build creates the resulting css-file to include it in the solution. Maybe I'm thinking too complicated, but I just couldn't get that to work so far.

Any ideas how I can achieve that? (Maybe I should also mention that none of the dev machines got any internet connection)

Answer 1

If you're building an MVC app, you can use MVC's bundling feature along with the SASS NuGet package . And, be sure to enable minification. There's a UseNativeMinification property on SassAndScssSettings . That way you don't need to deal with merging the css file when you get latest or check in. Reference this thread: SASS/TFS best practice

Another way is running a script (eg with PowerShell task) on the server that to install the gulp components and then call the sass compile task to compile the SASS. Refer to Powershell build - compiling SASS for details.