Sass for Blazor

Sass for Blazor

Should we compile Sass on Dev Machine or Build Server?

Published on Friday, November 4, 2022
Libraries

Sass for Blazor

What is Sass?

Sass (syntactically awesome style sheets) is a preprocessor scripting language compiled into CSS (Cascading Style Sheets). Sass uses SassScript, a simple scripting language.

Why use Sass?

I don't know. Front-end developers demand it.

Compiling Sass

There are a few options for compiling Sass. The most popular is the official Dart and 'sass' node module on npm - a Java Script version (compiled from Dart Sass). There are many other options, including original Ruby implementation (deprecated), 'libSass' (C++), 'JSass' etc.

Compiling Sass for .NET Development

.NET does not have as good support for Sass as other languages. However, there are a few options for compiling Sass for .NET development. My biggest concern for most solutions is the node.js requirement. Why would I have to install 'node.js' to use Sass with Asp.Net, mainly if we use the Blazor/Asp.Net combination? We want to escape from java script, not embrace it!

  • Use AspNetCore.SassCompiler library - Net Core wrapper library of official Dart solution (linux-arm64, linux-x64, osx-arm64, osx-x64, win-x64) (100 stars, but updated frequently).
  • Use Web Compiler - Visual Studio extension (0.86 million downloads) that enables (automatic) Sass compilation through Visual Studio, last updated in 2018.
  • Automate Sass compilation during prebuild events - Use any compiler.

Build Servers and Sass

I'm not sure if we should compile Sass files on build servers like we are compiling other source code, or should we compile it locally and push Sass files as well ass CSS files.

  • I like the compiled CSS option because developers that don't change CSS don't have to compile it (even if it is automatically).
  • I dislike the compiled CSS option because you have a primary source of truth -> Sass files and local copy -> CSS file. Also, what happens if you have merge conflicts? You have to be careful about Sass files and remember to recompile CSS. These are not big problems, but they are something to be aware of.

Blazor and Sass with AspNetCore.SassCompiler library

At the moment, the solution with AspNetCore.The SassCompiler library looks the simplest one, at least for non-front-end developers. Compile it locally and push Sass and CSS files to the source code repository

The recommended solution from the developers of this library is to compile it during debug build. However, Blazor often has problems with Hot reload. At least in .NET 6, it does not work in debug mode. Take into consideration how you are running your application during development.

public void ConfigureServices(IServiceCollection services) 
{
  
#if DEBUG
  services.AddSassCompiler();
#endif

}

This is not a good solution for complex projects with many front-end developers that often modify CSS files, but this is good enough for more straightforward applications.