twitter-bootstrap – 导入引导少于扩展类在字形字体上创建404

在我的Angular 2应用程序中,我从raw css切换到较少,以便我可以写：

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

而不是在我的HTML中堆叠类名.为了让这个工作,我需要：

>在angular-cli.json中,更改：

“defaults”：{
“styleExt”：“css”,
“prefixInterfaces”：false
}

到“styleExt”：“少”,
>将我的foo.component.css重命名为foo.component.less并相应地更新foo.component.ts.
>在组件少的时候,为了引用引导类,我不得不：@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服务提供,所有这些都是默认的.

解决方法

我有同样的问题与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

所以对于较少应该在你的风格.没有：

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