Use Web Compiler for SCSS files in Azure DevOps pipeline

Question

Is it possible to use Web Compiler (developed by Mads Kristensen) in a CI pipeline in Azure DevOps?

We have the Web Compiler Visual Studio tool installed on our development computers. Building and publishing will compile the .scss files into .css and everything works great.

Recently we've created CI pipelines in Azure DevOps and we found that our .scss files are no longer being compiled.

We've searched for a way to compile this in the pipeline but with no success.

Can we use the Web Compiler referenced above for this? Maybe installing it using the dotnet tool install command and then manually calling another command to build the files? We didn't find any commands for this Web Compiler.

Our project is a .Net 6 Razor Pages project and we use Visual Studio 2022.

If this is not possible, are there any alternatives?

Answer 1

I'm not aware of any way to invoke the VS extension from a CI build - it's simply a different paradigm.

You could consider using a task runner with a watch to compile your scss files whenever you save the file. These can also be run easily as part of your CI process, as that's what task runners excel at.

If you do go down this path, you can use the Task Runner Explorer window in VS to manage the tasks - e.g. start the watch task when the project loads in VS. See the documentation here. VS natively supports grunt and gulp, and there's an extension for NPM task runner support as well.

Answer 2

The CI instructions on Mads page worked for me: from the Web Compiler menu select 'enable compile on build', see https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler#user-content-compile-on-build--ci-support

This will add a NuGet package, so your CI also needs tasks for NuGetToolInstaller and NuGetCommand 'restore'.

Of course you also need to install the Web Compiler extension in Visual Studio on your compile server. So that requires a non-default Agent in DevOps to a dedicated compile server, where you can RDP to install Visual Studio and extensions.

Answer 3

Earlier when we had came to this situation, we noticed there were no extension for compiling scss files in Azure Devops Pipelines. So we made one and used in many of our projects. Hope this would be useful to you as well

https://marketplace.visualstudio.com/items?itemName=beingnin.process-sass-files

Note: this extension not only can compile scss to css, but also it can do vendor prefixing as well.