Material Design for Angular 2 Typescript syntax error
<p>I'm learning Angular2 and modifying the ToDo app that I've scaffolded. The instructions for implementing Angular 2 Material Design read you should import the directives and providers then reference the styles in your page and then it reads:</p>

<p>...Or (more preferably) import them into your SCSS files.</p>

<pre><code>$md-font-url: "node_modules/ng2-material/dist/";
@import "node_modules/ng2-material/dist/font";
@import "node_modules/ng2-material/source/all";
</code></pre>

<p>I put the code at the top of my CSS file but $md-font-url reports the Typescript syntax error "at-rule or selector expected". The code runs after the change but my heading is only one-half visible. I now have two style tags in the HTML header and the second one starts with "$md-font-url[_ngcontent-qtx-1]: "node_modules/ng2-material/dist/"[_ngcontent-qtx-1];"</p>

<p>What does the $ prefix represent and what is the purpose of the first line that I placed in the CSS? What at-rule or selector is it expecting?</p>