Importing bootstrap less to extend a class creates 404 on glyphicons fonts

Question

In my Angular 2 application, I switched from raw css to less so that I can write:

.main-button {
  .btn;
  .btn-primary;
  padding: 1em;
}

instead of stacking class names everywhere in my html. To get this to work, I needed to:

1. in angular-cli.json, change:

   "defaults": { "styleExt": "css", "prefixInterfaces": false }

   to "styleExt": "less",

2. Rename my foo.component.css to foo.component.less and update the foo.component.ts accordingly.

3. In the component less, to be able to reference the bootstrap classes, I had to: @import "~bootstrap/less/bootstrap";

This works fine except that I'm now getting 404 errors in the browser console:

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 

I tried a few variations on @icon-font-path without success. I checked the requests for fonts in the network tab and see http://localhost:4200/448c34a56d699c29117adc64c43affeb.woff2.

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.

What is the right way to do this without having 404 errors ?

This is served by ng serve, it's all default there.

Answer 1

I had same problem with sass:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

https://github.com/igorzg/angular2-zero-to-hero/blob/master/ui/src/styles.scss

So for less should be in your styles.less:

$icon-font-path: "~bootstrap/fonts/";
@import "~bootstrap/less/bootstrap";