Angular CSS SASS Visual Studio

Implementing SASS in Angular Core 2 Visual Studio Template

What did I learn today?

Today I found that the Visual Studio 2017 Core 2 template for Angular does not include any type of CSS preprocessor despite having WebPack installed.  I can understand that they want let people pick the CSS system they prefer but I feel not to include something is a huge miss.  My favorite CSS preprocessor is SASS.

This quick post will describe how to get SASS preprocessing with file watches setup using WebPack in Visual Studio.

How to set it up?

  1. First you’ll need to install the .NET Core Template extension (Link)
  2. Create a new ASP.NET Core Web Application.
  3. Build to make sure everything works.

Implementing SASS

In your package.json file you’ll need the add the bolded packages to your devDependencies

"devDependencies": {
 "@types/chai": "4.0.1",
 "@types/jasmine": "2.5.53",
 "chai": "4.0.2",
 "jasmine-core": "2.6.4",
 "karma": "1.7.0",
 "karma-chai": "0.1.0",
 "karma-chrome-launcher": "2.2.0",
 "karma-cli": "1.0.1",
 "karma-jasmine": "1.1.0",
 "karma-webpack": "2.0.3",
 "raw-loader": "0.5.1",
 "sass-loader": "6.0.6",
 "node-sass": "4.5.3"

In your webpack.config.js, you’ll need to add one line to your module rules:

module: {
 rules: [
 { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
 { test: /\.html$/, use: 'html-loader?minimize=false' },
 { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
 { test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader']}


This was a simple blog post on how to add SASS to the Visual Studio ASP.NET Template.  I spent about searching around how to do this on the web and didn’t have much luck but found a few links to get me part of the way there.  Hopefully this saves you some time!

By Brett The Whitt

Brett is a web development consultant and has been working for more than 12 years. He specializes in hybrid mobile app development and using front end frameworks such as AngularJS. Always passionate about continuous education, he has been most recently mentoring and encouraging his co-workers to become better speakers. To further this growth, he leads Lightning Talk Nights and other events at his job at HMB Inc

6 replies on “Implementing SASS in Angular Core 2 Visual Studio Template”

Hi there,
Thanks for this article. I am using matchMedia in my code. with this approach, it does not understand matchMedia:
NodeInvocationException: matchMedia is not defined
ReferenceError: matchMedia is not defined
How can I get it resolved?


Leave a Reply

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

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

Facebook photo

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

Connecting to %s