导入较少的bootstrap以扩展类会在glyphicons字体上创建404

Question

在我的Angular 2应用程序中,我从原始css切换到less,以便我可以写:

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

而不是在我的HTML中到处堆叠类名.为了实现这一点,我需要:

1. 在angular-cli.json,改变:

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

   至 "styleExt": "less",

2. 重命名我foo.component.css要foo.component.less和更新foo.component.ts相应.

3. 在组件中,为了能够引用引导类,我不得不: @import "~bootstrap/less/bootstrap";

这工作正常,但我现在在浏览器控制台中收到404错误:

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 

我在@ icon-font-path上尝试了一些变种而没有成功.我检查了网络选项卡中的字体请求并查看http://localhost:4200/448c34a56d699c29117adc64c43affeb.woff2.

我也尝试过使用sass/scss.这需要附加模块bootstrap-sass和类似的include指令,但结果完全相同.

没有404错误的正确方法是什么？

这是服务ng serve,它是默认的.

Answer 1

我对 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

所以 for less 应该在你的 styles.less 中：

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