SASS Processing in Azure Devops Pipeline by@beingnin

SASS Processing in Azure Devops Pipeline

Read on Terminal Reader
Open TLDR
react to story with heart
react to story with light
react to story with boat
react to story with money
This article is actually not meant to be a tutorial, but to shout out to the world that there exists an azure devops extension for compiling sass files. However official documentation of this extension is enough alone for you to integrate it in your pipelines.
image
Beingnin HackerNoon profile picture

Beingnin

Self taught developer | Tech blogger | Open source contributor

Well, I would start with a short story which happened few months ago. My organization then was trying to switch their project management tool from an old and trended out Team Foundation Server to the new and sophisticated Azure Devops suit, deciding to use almost all the features it offers from version control to boards. What to say; I was in charge of the technical aspects of that migration, like devising branch and merge strategies to design and develop CI/CD pipelines.


So here is what happened. We had a couple of front-end applications which extensively use SCSS as the primary style keeping format and they needed to be processed and compiled to CSS(because browsers only understand CSS) while the build pipeline triggers. It caught me by surprise that there were no Azure DevOps extensions built to do this task which I desperately wanted back then.


So I made one which can compile sass files to CSS and also add vendor prefixes to the resultant css😊. PS: It is now available in the visual studio market place for free.


This article is actually not meant to be a tutorial, but to shout out to the world that there exists an Azure DevOps extension for compiling sass files. However official documentation of this extension is enough alone for you to integrate it into your pipelines.

Process Sass Files

To use this extension you first have to install it in your organization, probably with the help of your organization administrator, since installing extensions needs special permissions. Once it is installed, this extension will be available to be used among the other pre-installed tasks.


Use task assistant pane to view the installed task

Use task assistant pane to view the installed task


Once installed, you can configure the task of your needs. In order for this extension to work, the bare minimum parameters you need to configure are:


  • inputFile: which SCSS/sass file in your repository need to be compiled to CSS
  • outputFile: Where exactly does the compiled CSS file need to generate


Other than the above two configurations, there are additional three features this extension provides you with:


  • style: You can either select Normal or Minified. If selected Minified, the resultant CSS will be compressed
  • enableVendorPrefixing: You can opt-in for vendor prefixing. Learn vendor prefixing here. If you enable vendor prefixing, the process-sass-files task will add vendor prefixes to the generated CSS file
  • Tool Versions: The process-sass-files extension uses two cli-s for it’s entire operations. The sass compiler and autoprefixer-cli. By default, it uses the latest versions of these tools. However, you can configure the task in such a way that the process-sass-files task always uses the exact versions of sass and autoprefixer you use in your dev environment


image

At last, your pipeline might look something like the above and be able to form a proper CSS file once the pipeline is run.


Happy coding!


react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!