How to Manage SASS/CSS Files with an ASP.NET/Blazor Website?
I recently asked myself this question for my platform 🤔.
Since I have SASS files that need to be "compiled" into CSS, plus CSS post-processing tasks like bundling and minification, how can this be done efficiently? Here's what I discovered!
Using Visual Studio 2022 Extensions
Visual Studio is a fantastic IDE, but sometimes it lacks certain features. Managing CSS files is one of them. Thankfully, Visual Studio is highly extensible. A quick visit to the Marketplace revealed plenty of options, and I found the following extension: BundlerMinifier64
While this tool works decently, I wasn’t fully satisfied due to a few limitations:
- Configuring it to handle multiple SASS files can be cumbersome, and the documentation isn’t very clear, especially when you want to produce a single output file.
- Every developer on the team needs to install the extension for consistency 😕.
- It’s not suitable for integration into a DevOps pipeline 😱.
So, I uninstalled the extension and explored another path...
Using Gulp
For those unfamiliar, Gulp is a task management tool that integrates with Visual Studio 2022 (via the Task Runner Explorer). With Gulp, you install plugins and write a JavaScript file for automation.
This was my preferred solution because:
- A wide variety of plugins exist to meet different requirements
- It integrates well with DevOps pipelines
- The configuration file is stored in the source code, making it easy for any developer to set up
It worked perfectly until... Gulp stopped evolving 😰 (or maybe I missed some updates).
With the latest NodeJS versions, I couldn’t run my scripts anymore (I had to force version 10 in my pipelines, but NodeJS 10.x no longer works on Windows 11).
Faced with this setback (since Gulp served me well for a long time), I had to look for an alternative...
Using a Dotnet Tool
Let’s face it: .NET Core was designed to compete directly with NodeJS. Naturally, the .NET ecosystem has evolved to offer a similar developer experience. This is how dotnet tools (locally or globally installable packages that act as utilities) came into existence.
Since Gulp was no longer working, I searched for a solution—not specifically thinking of dotnet tools—and found an excellent one: webcompiler.
Steps to Follow
First, install the tool on your system (preferably in an admin terminal):
dotnet tool install Excubo.WebCompiler --global
Next, use the webcompiler command directly in the terminal to compile the files. The tool offers many options (check the documentation).
To automate the compilation/minification, update the .csproj file:
<Target Name="CompileStaticAssets" AfterTargets="AfterBuild">
<Exec Command="webcompiler -r folder -o destination -z disabled" StandardOutputImportance="high" />
</Target>
Here, by setting the AfterTargets attribute, I specify that the tool should run after the build process is complete (other targets can also be configured as needed).
The Icing on the Cake: Azure DevOps
On Azure DevOps, it’s super simple:
- task: CmdLine@2
inputs:
script: 'dotnet tool install Excubo.WebCompiler --global'
That’s it! The .csproj file already handles the tool execution after the build.
Thank You, Dotnet Tools 😍
