在我的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,但结果完全相同.
这是由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";