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 as the primary style keeping format and they needed to be processed and compiled to ( ) 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. SCSS CSS because browsers only understand CSS 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 for free. visual studio market place 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. 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: which SCSS/sass file in your repository need to be compiled to CSS inputFile: Where exactly does the compiled CSS file need to generate outputFile: Other than the above two configurations, there are additional three features this extension provides you with: You can either select Normal or Minified. If selected Minified, the resultant CSS will be compressed style: You can opt-in for vendor prefixing. Learn vendor prefixing . If you enable vendor prefixing, the task will add vendor prefixes to the generated CSS file enableVendorPrefixing: here process-sass-files The extension uses two cli-s for it’s entire operations. The compiler and . By default, it uses the latest versions of these tools. However, you can configure the task in such a way that the task always uses the exact versions of sass and autoprefixer you use in your dev environment Tool Versions: process-sass-files sass autoprefixer-cli process-sass-files 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!

Microsoft

Mozilla

Efficient Server Side Pagination using Mongodb

Nominated for 2022 - HackerNoon Contributor of the Year - Mongodb

Nominated for 2022 - HackerNoon Contributor of the Year - Optimization

Nominated for 2022 - HackerNoon Contributor of the Year - Azure

Too Long; Didn't Read

Make resilience your competitive advantage

SASS Processing in Azure Devops Pipeline

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Efficient Server Side Pagination using Mongodb

10 reasons to give cloud computing a go

10 Microsoft Azure Courses for Beginners to Learn Azure Cloud Computing

The Noonification: Proglogging: The Developers Detective Toolkit (10/9/2023)

Top 10 AI Development Companies in USA

Efficient Server Side Pagination using Mongodb

10 reasons to give cloud computing a go

10 Microsoft Azure Courses for Beginners to Learn Azure Cloud Computing

The Noonification: Proglogging: The Developers Detective Toolkit (10/9/2023)

Top 10 AI Development Companies in USA

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps