title: Importing bootstrap less to extend a class creates 404 on glyphicons fonts
body: <p>In my Angular 2 application, I switched from raw css to less so that I can write:</p>
  
  <pre><code>.main-button {
    .btn;
    .btn-primary;
    padding: 1em;
  }
  </code></pre>
  
  <p>instead of stacking class names everywhere in my html. To get this to work, I needed to:</p>
  
  <ol>
  <li><p>in <code>angular-cli.json</code>, change:</p>
  
  <p><code>"defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }</code></p>
  
  <p>to <code>"styleExt": "less",</code></p></li>
  <li><p>Rename my <code>foo.component.css</code> to <code>foo.component.less</code> and update the <code>foo.component.ts</code> accordingly.</p></li>
  <li><p>In the component less, to be able to reference the bootstrap classes, I had to: <code>@import "~bootstrap/less/bootstrap";</code></p></li>
  </ol>
  
  <p>This works fine except that I'm now getting 404 errors in the browser console:</p>
  
  <pre><code>jquery-1.12.3.min.js:2 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.woff2 (anonymous function) @ jquery-1.12.3.min.js:2i @ jquery-1.12.3.min.js:2fireWith @ jquery-1.12.3.min.js:2ready @ jquery-1.12.3.min.js:2K @ jquery-1.12.3.min.js:2
  foobar:1 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.woff 
  foobar:1 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.ttf 
  </code></pre>
  
  <p>I tried a few variations on @icon-font-path without success. I checked the requests for fonts in the network tab and see <code>http://localhost:4200/448c34a56d699c29117adc64c43affeb.woff2</code>.</p>
  
  <p>I also tried to use sass/scss. This requires the additional module bootstrap-sass with a similar include directive but the result is exactly the same.</p>
  
  <p>What is the right way to do this without having 404 errors ?</p>
  
  <p>This is served by <code>ng serve</code>, it's all default there.</p>