SassCompiler Setup

sandeepsandeep
1 min read

The AspNetCore.SassCompiler NuGet package offers a middleware for ASP.NET Core applications, enabling on-the-fly compilation of Sass files into CSS. Below is a straightforward guide on how to utilize it:

  1. Install the NuGet Package:

    • You can install the AspNetCore.SassCompiler package either via the NuGet Package Manager in Visual Studio or through the Package Manager Console:

    • Install-Package AspNetCore.SassCompiler

  2. Configuration with sasscompiler.json:

    • After adding the package, Sass styles from the source (defaults to: Styles) will be automatically compiled into .css files in the target folder (defaults to: wwwroot\css) during the build process.

    • Configuration can be adjusted in either appsettings.json or sasscompiler.json.

    • Note: Configuration settings should not be nested when using sasscompiler.json.

  3. Add Configuration Options:

    • Specify the configuration options in JSON format.

    • Below is an example configuration used in the Sample Project:

{
  "Source": "Styles",
  "Target": "wwwroot/css",
  "Arguments": "--style=compressed",
  "GenerateScopedCss": false,
  "ScopedCssFolders": [
    "Views",
    "Pages",
    "Shared",
    "Components"
  ],
  "IncludePaths": [],
  "Configurations": {
    "Debug": {
      "Arguments": "--style=expanded"
    }
  }
}
  1. Effect of Setup:
  • Once the setup is complete, any changes made in the Sass files and saved will be reflected in the target file specified in the configuration (wwwroot/css).

This setup streamlines the process of Sass to Css compilation, enhancing the efficiency of styling in your ASP.NET Core application.

0
Subscribe to my newsletter

Read articles from sandeep directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

sandeep
sandeep