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.
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.
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
Go to the installer file created as mentioned in my previous article referred to in Step 1, add the below line as shown.
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.
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.
- ASP.Net Core Web Optimizer Github Repository.
- ASP.Net Core Web Optimizer - Compiler for Scss Github Repository.
Please drop a comment below if you have any queries.