ASP.NET Core 2: Simple SASS and Typescript Compiling

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

FileNewASPNETCORE

Step 3: Now for the Typescript: Add a Typescript file by right clicking the wwwroot/js folder and choosing Add. Select Typescript

Animalts.png

Step 3: Edit the new typescript file, perhaps with something simple like:

var animal = "dog";

 

Step 4: Save the file. You’ll notice a new Javascript file is under it all nicely compiled!

jscompiled

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:

sass

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.

rightclicksass

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

compile sass nuget

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.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s