How to compile the EJ2 SCSS theme using LibSassHost in JavaScript?
Overview
This article explains how to compile Syncfusion EJ2 SCSS theme files using the “LibSassHost” on the server side, which enables us to change the theme dynamically.
Prerequisite
- .Net Core SDK
- Visual Studio IDE
Use Case Scenario
Since SCSS files are not compiled on the client side, themes
with different color schemes are usually precompiled during build time and
loaded into the DOM according to runtime condition changes, i.e., compilation
during build time and simple CSS content changes at 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 an 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:
- LibSassHost
- 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 with the 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 a simple application for reference where themes are changed using the Action method when the buttons in the header section are clicked.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicTheme154007864