Using SASS with Webpack, Angular2 and Visual Studio

This post shows how to use SASS with Webpack and Angular 2 in Visual Studio. I had various problems trying to get this to work from Visual Studio using a Webpack build. The following is a solution which works, but not the only one.

Code: https://github.com/damienbod/Angular2WebpackVisualStudio

Install node-sass globally, so that the package is available everywhere. The latest installed node-sass will then be available on the path.

npm install node-sass -g

Add the SASS packages as required in the project npm packages.json file.

 "devDependencies": {
        "node-sass": "3.10.1",
        "sass-loader": "^3.1.2",
        "style-loader": "^0.13.0",
        ...
}

The SASS configuration can then be added to the Webpack config file(s). The SASS scss files are built as part of the Webpack build.

{
  test: /\.scss$/,
  loaders: ["style-loader", "css-loader", "sass-loader"]
},

Now a SASS file can be created and appended to any Angular 2 component.

body {
    padding-top: 50px;
}

.starter-template {
    padding: 40px 15px;
    text-align: center;
}

.navigationLinkButton:hover {
    cursor: pointer;
}

a {
    color: #03A9F4;
}

The scss file or files can be used in the Angular 2 component typescript file using the @Component. The styles property defines an array of strings so each scss require method, needs to be converted to a string, otherwise it will not work. Thanks to Jackie Gleason for this solution.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import './app.component.scss';
import '../style/app.scss';

@Component({
    selector: 'my-app',
    templateUrl: 'app.component.html',
})

export class AppComponent {

    constructor(private router: Router) {
    }
}

If you have the following error message somewhere in your Webpack build: binding.node. Try reinstalling `node-sass`, try the following fixes:

1: Reinstall node-sass

npm install node-sass -g

2: Edit the Visual Studio project and settings

You can use the node from your path, and not the installed Visual Studio node by changing the Tools > Options > Projects and Solutions > External Web Tools. Move the path option to the top. This solution is from Mads Kristensen and explained here: solution

m1les gave this solution in Stack overflow.

You can then view the css styles created from SASS Visual Studio Webpack build.

Links

http://stackoverflow.com/questions/31301582/task-runner-explorer-cant-load-tasks/31444245

https://github.com/webpack/style-loader/issues/123

Customize external web tools in Visual Studio 2015

http://sass-lang.com/

https://www.bensmithett.com/smarter-css-builds-with-webpack/

https://github.com/jtangelder/sass-loader

http://eng.localytics.com/faster-sass-builds-with-webpack/

2 comments

  1. Hello,
    When I run this solution, it works fine. But in Microsoft Edge, when I see the console log I see many errors related to missing .map files. Can you please tell me why exactly I am getting those errors?

    Thanks.

    1. Hi Nafr1

      That’s a bug in the dev build which I will fix. I have opened a gitHub issue for this. If you do a production build, everything works correctly.

      I have put all the effort in getting the production build right. Over this next two weeks, I will clean up the dev build.

      For a production build, use the command line and enter

      >npm run buildProduction

      then you will have no warnings.
      Greetings Damien

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: