Page css not updating in browser using npm node-sass and concurrent in Angular2 project
<p>I'm starting a small project to teach myself Angular2. As it is not fully released I have steered clear of using a Yeoman Generator and a automation tool like Grunt or Gulp. I am using the Node Package Manager and running my automation tasks from the "scripts" property.</p>

<p>I have installed concurrently, lite-server, typescript and node-sass. When I run a "watch" task to update when I change my source files a local server runs fine, this updates when I change any of my TypeScript classes however I have noticed that my CSS isn't being loaded despite the generated <code>css</code> being correct when I amend my source <code>scss</code> file. No CSS is loaded to the browser whatsoever. This is my package.json, you can see my watch script/task in the <code>scripts</code> object.</p>

<pre><code>{
      "name": "my-first-angular2",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "clean": "rm -f ./*.js; rm -f ./*.js.map; rm -f ./intermediates/*.js; rm -f ./intermediates/*.js.map",
        "tsc": "./node_modules/.bin/tsc",
        "tsc:w": "./node_modules/.bin/tsc -w",
        "node-sass": "node-sass styles/ -o styles/",
        "node-sass:w": "node-sass -w styles/ -o styles/",
        "serve": "./node_modules/.bin/live-server --host=localhost --port=8080 .",
        "watch": "concurrent \"npm run tsc:w\" \"npm run node-sass:w\" \"npm run serve\" "
      },
      "license": "ISC",
      "dependencies": {
        "angular2": "2.0.0-beta.16",
        "es6-promise": "3.0.2",
        "es6-shim": "0.35.0",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.2",
        "systemjs": "0.19.6",
        "tslint": "3.7.0-dev.2",
        "typescript": "^1.8.10",
        "zone.js": "0.6.12"
      },
      "devDependencies": {
        "concurrently": "^2.0.0",
        "lite-server": "^2.2.0",
        "typescript": "^1.8.10",
        "typings": "^0.8.1",
        "bootstrap-sass": "^3.3.6",
        "node-sass": "^3.6.0"
      }
    }
</code></pre>

<p>The generated css file is called <code>styles/main.css</code> and I link to it like so in my <code>index.html</code></p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;My First Angular2 App&lt;/title&gt;
    &lt;!-- Libraries --&gt;
    &lt;script src="node_modules/es6-shim/es6-shim.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;

    &lt;!-- Stylesheet --&gt;
    &lt;link href="styles/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script&gt;
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app.js')
            .then(null, console.error.bind(console));
    &lt;/script&gt;
    &lt;angular2&gt;&lt;/angular2&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Can any one see what I am doing wrong? I get no errors in the console or the command line (in fact everything is working okay). Here is my folder structure in the Atom IDE:</p>

<p><a href="https://i.stack.imgur.com/Is8GI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Is8GI.png" alt="You can see the generated main.css"></a></p>