twitter-bootstrap - 导入 bootstrap less 以扩展类会在 glyphicons 字体上创建 404

Question

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

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

而不是在我的 html 中到处堆放类名。为了让它发挥作用，我需要:

1. 在 angular-cli.json 中，更改:

   “默认值”:{ "styleExt": "css", “前缀接口(interface)”:假 }

   到 "styleExt": "less",

2. 将我的 foo.component.css 重命名为 foo.component.less 并相应地更新 foo.component.ts。

3. 在 less 组件中，为了能够引用 Bootstrap 类，我必须:@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。这需要带有类似 include 指令的附加模块 bootstrap-sass，但结果完全相同。

没有 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";