How to compile the EJ2 SCSS theme using LibSassHost in JavaScript?

Overview

This article explains how tocompile Syncfusion EJ2 SCSS theme files using the “LibSassHost” in server side which enables us to change the theme dynamically.

Prerequisite

1. .Net Core SDK
2. Visual Studio IDE

Use Case Scenario

Since SCSS files are not complied in client side, usually themes with different color schemes are precompiled in build time and loaded to the DOM according to runtime condition changes, i.e., compilation in build time and simple CSS content change in runtime.

If you want to change the theme's colors during runtime, you can do this by compiling SCSS on the server side, either in the application's Action method or in a separate WebAPI service.

Create ASP.NET Core Application

You can create ASP.NET Core application with Syncfusion EJ2 components using the “Getting Started with ASP.NET Core MVC”.

Installing LibSassHost

Open the NuGet package manager and install the following two packages for LibSassHost:

1. LibSassHost
2. LibSassHost.Native

LibSassHost.Native must be based on your Operating System as follows.

https://www.nuget.org/packages/LibSassHost.Native.win-x64/

https://www.nuget.org/packages/LibSassHost.Native.linux-x64/

https://www.nuget.org/packages/LibSassHost.Native.osx-x64/

Compilation using LibSassHost

The following code sample provides you required configuration for compiling Syncfusion SCSS using LibSassHost.

 
string basePath = _hostingEnvironment.WebRootPath;
string importFilePath = Path.Combine(basePath, "import.scss");
string inputFilePath = Path.Combine(basePath, "custom.scss");
string importContent = System.IO.File.ReadAllText(importFilePath);
string inputContent = "$accent: #08f410;\n$accent-font: #e3165b;" + importContent;
System.IO.File.WriteAllText(inputFilePath, inputContent);
string outputFilePath = Path.Combine(basePath, "custom.css");
CompilationOptions options = new CompilationOptions
{
    IncludePaths = new[] { "node_modules/@syncfusion/" }            
};
CompilationResult result = SassCompiler.CompileFile(inputFilePath, outputFilePath, null, options);
System.IO.File.WriteAllText(outputFilePath, result.CompiledContent);
 

Conclusion

You can find the simple application for reference where themes are changed using the Action method when the buttons in header section are clicked.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicTheme154007864