Using SASS with Webpack, Angular 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

2017.02.08: Updated webpack 2.2.1, angular 2.4.6
2017.01.07: Updated webpack 2.2.0-rc.3, angular 2.4.1

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/

Advertisements

6 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

  2. Mesut A · · Reply

    how to debug angular2 typescript in visual studio with breakpoint or its possible?

    1. This got broken when we updated to webpack 2. Idea is that you debug directly in Chrome now, or firefox. In VS 2017, this will be supported inside VS with Chrome. If not I will fix then.

      Greetings Damien

  3. When trying to update to node-sass 4.1.1 my webpack crashes with code -1073741819 Version 3.10.1 works just fine. No idea why…

    1. Hi Henk, update your npm, 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: