В моем приложении 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
, там все по умолчанию.