Веб-приложение с Angular CLI не отображает глификоны bootstrap-sass

У меня есть приложение, созданное с помощью 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. Есть ли что-то, что мне не хватает?


angular angularjs twitter-bootstrap angular-cli bootstrap-sass
person Jacqueline    schedule 08.03.2017    source источник
comment
Добавьте закрывающий тег span ‹span class=glyphicon glyphicon-user›‹/span›   -  person ArrowHead    schedule 08.03.2017
comment
попробуйте поставить @import в качестве первой строки .. какие-либо изменения?   -  person federico scamuzzi    schedule 08.03.2017
comment
@ArrowHead, у меня это было в коде, просто забыл добавить сюда.   -  person Jacqueline    schedule 08.03.2017
comment
@federico, это должно быть внизу.   -  person Jacqueline    schedule 08.03.2017
comment
если вам требуется (../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss) ??   -  person federico scamuzzi    schedule 08.03.2017
comment
@federico, насколько я могу судить, он правильно импортирует бутстрап, так как у него есть все правильные CSS. Единственная проблема - глификоны   -  person Jacqueline    schedule 08.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, это связано с тем, как webpack настроен в angular-cli. В настоящее время вы можете обойти это, указав на шрифты начальной загрузки CDN со следующим в файле scss

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