Sass Compiler Library for .NET 6 and above. without node, using dart-sass as a compiler
Get Started
$ dotnet add package AspNetCore.SassCompilerReadme
AspNetCore.SassCompiler
Sass Compiler Library for .NET Core 3.1/5.x./6.x without node.
Installation
The installation of this package is quite simple, you can install this package using NuGet with the following command:
# Package Manager
PM> Install-Package AspNetCore.SassCompiler
# .NET CLI
dotnet add package AspNetCore.SassCompiler
Configuration
After adding the package, the Sass styles from the SourceFolder (defaults to: Styles) will automatically be compiled into .css files in the TargetFolder (defaults to: wwwroot\css) on build.
You can also adjust the default configuration in the appsettings.json or sasscompiler.json, do note that when using appsettings.json the configuration needs to be nested under a "SassCompiler" property, but when you're using sasscompiler.json the settings should not be nested.
Available options
| Name | Default value | Description |
|---|---|---|
| SourceFolder | "Styles" | The folder where all the .scss files reside |
| TargetFolder | "wwwroot/css" | The folder to output the generated .css files to |
| Arguments | "--error-css" | Arguments passed to the dart-sass executable |
| GenerateScopedCss | true | Enable/disable support for scoped scss |
| ScopedCssFolders | ["Views", "Pages", "Shared", "Components"] | The folders in which .scss files are considered for scoped css |
Examples
<details open> <summary>appsettings.json</summary>{
"SassCompiler": {
"SourceFolder": "Styles",
"TargetFolder": "wwwroot/css",
"Arguments": "--style=compressed",
"GenerateScopedCss": true,
"ScopedCssFolders": ["Views", "Pages", "Shared", "Components"],
// You can override specific options based on the build configuration
"Configurations": {
"Debug": { // These options apply only to Debug builds
"Arguments": "--style=expanded"
}
}
}
}
</details>
<details>
<summary>sasscompiler.json</summary>
</details>