Compiling Sass/SCSS files for an ASP.NET Core solution

Sass

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

In a regular solution, we use tools such as Gulp scripts to compile and build Sass files. With the WebOptimizer.Sass module, we can dynamically compile Sass and generate CSS files.

Steps to configure ASP.Net Core Sass Compilation

1. The ASP.Net Web Optimizer needs to be configured on the solution for the Sass compiler to work.

   Refer to my article on how to set up ASP.Net Core Web Optimizer here.

2. After the above steps, Install the LigerShark.WebOptimizer.Sass NuGet package.

   As the package is still in pre-release, you need to use the below command to install the package.

   dotnet add package LigerShark.WebOptimizer.Sass --prerelease

3. Go to the installer file created as mentioned in my previous article referred to in Step 1, add the below line as shown.

   using Lamar;
   using Microsoft.Extensions.Configuration;
   using Microsoft.Extensions.DependencyInjection;
   using Microsoft.Extensions.Hosting;
   using System;
   
   namespace Project.Web.Installers
   {
       public class WebOptimizerInstaller : IInstaller
       {
           public void InstallServices(ServiceRegistry services, IConfiguration configuration)
           {
               string environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
               bool isDevelopment = environment == Environments.Development;
               services.AddWebOptimizer(pipeline =>
               {
                   pipeline.AddScssBundle("/css/styles.css", "scss/style.scss"); //Add this line
                   pipeline.AddJavaScriptBundle("/js/site.js", "js/**/*.js");
                   if (!isDevelopment)
                   {
                       pipeline.MinifyCssFiles();
                       pipeline.MinifyJsFiles();
                   }
               });
           }
       }
   }
   

4. Similarly, when you hit http://site-endpoint/css/styles.css, you get a compiled CSS file with the contents from styles.scss.

   Note that all the other SCSS files are imported in the styles.scss here.

5. If you have more than one SCSS file to compile, you can use the below syntax.

   pipeline.AddScssBundle("/css/styles.css", "scss/style.scss", "scss/base-style.scss");

As the files are being served by Memory Cache, the performance also will be high. No build tasks are required to save the compiled files, they are served dynamically.

References

1. ASP.Net Core Web Optimizer Github Repository.
2. ASP.Net Core Web Optimizer - Compiler for Scss Github Repository.

Please drop a comment below if you have any queries.