Articles in this section
Category / Section

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

1 min read

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

  1. .Net Core SDK
  2. 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:

  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 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.

result

 

 

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


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied