Twitter bootstrap 导入无引导以扩展类会在字形图标字体上创建404

在Angular 2应用程序中，我从原始css切换到更少的css，以便编写：

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

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

在

angular cli.json

中，更改：

“默认值”：{
“STYLEXT”：“css”，
“prefixInterfaces”：false
}

至

“styleExt”：“less”，

将我的

foo.component.css

重命名为

foo.component.less

，并相应地更新

foo.component.ts

在component less中，为了能够引用引导类，我必须：

@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字体路径上尝试了一些变体，但没有成功。我在“网络”选项卡中检查了字体请求，请参见

http://localhost:4200/448c34a56d699c29117adc64c43affeb.woff2

我还尝试使用sass/scss。这需要具有类似include指令的额外模块引导sass，但结果完全相同

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

---

这是由

ng serve

提供的，它在那里是默认的。

Angular CLI将像448c34a56d699c29117adc64c43affeb.woff2一样捆绑您的字体。

---

如果您想要原始文件，可能必须在服务器上发布它们…

我对sass也有同样的问题：

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

因此，你的风格应该是“少”字。少：

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

---

尝试：

ng设置默认值。styleExt scss

Angular cli必须匹配全局和本地版本

运行

ng init

检查所有自动生成的文件中的更改

最后

ng构建

要使所有内容保持同步，请尝试：

git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm link

对于字体和资源，angular cli现在采用基于源文件的路径：

"assets": [ "assets", "favicon.ico" ]

---

您是否有某种.htacces将“…”缓存为路由而不是文件？与问题无关，但您可能希望这样做。否则，它会将整个引导包含到组件样式中，这可能不是您想要的。例如，

@import（reference）“~bootstrap/less/bootstrap”http://localhost:4200/node_modules/some_file

您必须使用别名或代理公开它。在dev环境中，您可以创建一个proxy.conf.json文件，如下所示：，并使用

ngserve--proxy-config proxy.conf.json

启动服务器。我尝试了less和scss

ng设置默认值。styleExt实际上只更改我问题中的行。它也非常有缺陷，并且往往会弄乱angular-cli.json，但这与本文无关。无论如何，所有的资产都在那里，包括字体。他们工作。只是在my component.less中包含引导less会尝试使用其全名而不是打包的字体来定位字体。这是正确的解决方案。显然，当你回复时，它对我不起作用，因为我将它包含在一个特定的文件中，而不是master styles.scss。（我同时切换到SASS）迁移到Angular 4时，由于这些警告，测试失败了。在styles.scss顶部添加这两行解决了这个问题。Angular 2中可能有一个附加问题固定在Angular 4上，很难说。@EricDarchis Angular 2中没有这个问题，您必须在主css中导入它并切换到scss