With the CSS isolation that is available since .NET5, applying styles to our Blazor components has never been easier. Did you know that it can easily be done by SASS, take advantage of the power of this preprocessor, and not have to worry about compiling to CSS ourselves? Here is the simple little trick to help you do it.
Adding the file SASS
The first step is to add our file SASS. For CSS isolation to work, Blazor needs our file to be named like the file razor, with the extension css. So we can create our file SASS on the same principle, but with the extension scss. For example, adding the file for my component Counter:
Compilation of SASS
The next step, once our styles are added, is to compile the SASS in CSS. The compiler of our project Blazor does not do it by default, so you have to go through another way. Fortunately, several bookstores Nuget already exist for this, so just choose one. For my part, I use LibSassBuilder, with which I had good results.
Once the library is installed, there is nothing more to do! In fact, all that is needed is to recompile when we have made changes, and the file css will be automatically generated.
Integration into pipelines
Obviously, we don't want to do manual steps to integrate this into our pipelines, the process must be integrated in a transparent manner. Once again, nothing could be simpler! Like the bookstore Nuget fits as a task in our build, everything will be taken care of automatically and our deployment will be done with the files css generated.
Conclusion
As you may have noticed, it is very easy to set up the use of SASS in our applications Blazor. Hope you found this tip helpful! If you don't work with SASS, do you have another preference for your applications Blazor? Let me know in the comments.
Bruno
English 
French