Импортирование бутстрапа меньше для расширения класса создает 404 на глификонных шрифтах

В моем приложении Angular 2 я переключился с raw css на меньшее, чтобы написать:

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

вместо того, чтобы группировать имена классов во всем html. Чтобы это работало, мне нужно:

  • в angular-cli.json, измените:

    "defaults": { "styleExt": "css", "prefixInterfaces": false }

    to "styleExt": "less",

  • Переименуйте мой foo.component.css в foo.component.less и обновите foo.component.ts соответственно.

  • В компоненте 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-font-path без успеха. Я проверил запросы на шрифты на вкладке сети и посмотрел http://localhost:4200/448c34a56d699c29117adc64c43affeb.woff2.

Я также пытался использовать sass/scss. Для этого требуется дополнительный модуль bootstrap-sass с аналогичной директивой include, но результат будет точно таким же.

Каков правильный способ сделать это без 404 ошибок?

Это обслуживается ng serve, там все по умолчанию.

Ответы

Ответ 1

У меня была такая же проблема с 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

Итак, для меньшего количества должно быть в ваших styles.less:

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

Ответ 2

Angular -CLI свяжет ваш шрифт следующим образом: 448c34a56d699c29117adc64c43affeb.woff2. Если вы хотите сырые файлы, возможно, вам придется публиковать их на своем сервере...

Ответ 3

Попробуйте: ng set defaults.styleExt scss

Angular -cli должен соответствовать глобальным и локальным версиям

Запустить ng init проверить изменения во всех автоматически сгенерированных файлах

Наконец ng build

Чтобы все синхронизировать, попробуйте:

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

Для шрифтов и активов прямо сейчас angular -cli принимает путь на основе исходных файлов:

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