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!