Compile Sass Files in .NET Core

Question

I am trying to add Sass files to my .NET Core application in Visual Studio 2017. However, I cannot find any way to compile .scss files once I've made them. I sifted through NPM and Bower, but neither offer support for Sass.

The Microsoft documentation for adding Sass (https://docs.microsoft.com/en-us/aspnet/core/client-side/less-sass-fa) is outdated, and assumes that the project has a package.json file. Any guidance on enabling Sass compiling for my project would be much appreciated.

Answer 1

The easiest way to add .scss to your ASP.NET Core apps is by going to the Nuget Package Manager and installing LigerShark.WebOptimizer.Core and LigerShark.WebOptimizer.Sass

After that, you can just put

<link rel="stylesheet" href="~/css/site.scss" />

in the head of the _Layout.cshtml file and the LigerShark.WebOptimizer.Sass package will compile all of your sass files automatically.

Answer 2

Use this extension for Visual Studio https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

This extension not only lets you manually compile SASS/SCSS files to CSS, but it also adds a compilerconfig.json which can recompile your CSS every single time you click save.

Additionally, this extension can compile on project build via a nuget package it can install into your project. Which also enables CI/CD support.

This is by far the easiest way to add SCSS/SASS compilation to an ASP.NET Core Project when working inside of Visual Studio.