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']}
 ]
 },

Conclusion

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!

Advertisements

6 comments

  1. 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?

    Like

Leave a Reply to Brett The Whitt Cancel 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