使用 Angular CLI 的 Web 应用程序不显示 bootstrap-sass 字形

Question

我有一个使用 Angular CLI 创建的应用程序，我正在使用 bootstrap-sass 自定义主题。我正在使用以下版本...

node: 6.9.5
os: win32 x64
@angular/common: 2.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8
bootstrap-sass: 3.3.7

在我的 .angular-cli.json 我有

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js"
  ]

在我的 html 文件中我有

<span class="glyphicon glyphicon-user"></span>

在我的 scss 文件中

$bootstrap-sass-asset-helper: true;
$icon-font-path: if($bootstrap-sass-asset-helper, "../bootstrap/", "../fonts/bootstrap/");
@import "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

当我运行 ng serve 或 ng build 和应用程序运行正确且在浏览器控制台中没有错误时，没有错误。但是，图标仍然不显示。我最初让这个应用程序运行可以正确显示字形，然后我将核心应用程序代码迁移到一个新的 angular-cli 应用程序中。有什么我想念的吗？

Answer 1

这似乎是 webpack 在 angular-cli 中的 configured 方式的问题。目前，您可以通过在 scss 文件

中使用以下内容指向 bootstrap CDN 字体来解决此问题

$bootstrap-sass-asset-helper: false;
$icon-font-path: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/";

使用 Angular CLI 的 Web 应用程序不显示 bootstrap-sass 字形

Web application with Angular CLI does not display bootstrap-sass glyphicons

twitter-bootstrap

angularjs

bootstrap-sass

angular-cli

angular