There are many ways to set up services to compile and minify Typescript and SASS style sheets. In this article I’ll be showing the simplest way using Visual Studio 2017 out-of-the-box.
Step 1: Setup (just once)
Install these plugins for Visual Studio 2017 by Mads Kristensen (everything he makes is golden):
Step 2: Create a ASP.NET Core 2 new project. Call it what ever you want
Step 3: Now for the Typescript: Add a Typescript file by right clicking the wwwroot/js folder and choosing Add. Select Typescript
Step 3: Edit the new typescript file, perhaps with something simple like:
var animal = "dog";
By default all the Typescript magic is done for you. To alter how it’s handled, right-click the project and choose Properties, then Typescript.
Step 5: Adding a Sass file. Right click the wwwroot/css folder. Choose Add and add a new sass stylesheet:
Step 6: Right click the new dogs.sass file and choose Web Compile then Compile. Accept any dialogs that appear. A NuGet package will be added.
A few things have happened. The dogs.css and dogs.min.css are created. As well in the root is a new compilerconfig.json file is made. Here’s where the magic happens.
Step 7: Right click compilerconfig.json and choose Web Compiler then Enable compile on build
Done! SASS files will auto compile when ever you build the project.
Task: Right click each SASS file you add just once and choose Web Compile then Compile.