В моем приложении Node.js я использую bootstrap-sass и Компас. Не gulp-compass и задачи, а именно Compass, у меня есть config.rb
файл Compass в приложении корневой каталог. Я компилирую свои активы с помощью этих команд:
$ compass watch
$ compass compile
И я не понимаю, как включить шрифты начальной загрузки на страницу, чтобы включить глификоны. Шрифты хранятся в bower_components\bootstrap-sass\assets\fonts\bootstrap
. Bootstrap-sass
переменные для шрифтов следующие:
$bootstrap-sass-asset-helper: false !default;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
// $icon-font-path: 'fonts/';
//** File name for all font files.
$icon-font-name: "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
И Compass компилирует это в этот css
:
@font-face {
font-family: 'Glyphicons Halflings';
src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");
src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
И у меня нет Глификонов на странице, потому что шрифты теперь находятся в ../fonts/bootstrap/glyphicons-halflings-regular.eot
.
Как бороться со шрифтами? Нужно ли вручную перемещать шрифты из
bower_components\bootstrap-sass\assets\fonts\bootstrap
to my
public/css/fonts
здесь находятся мои скомпилированные активы и откуда их берут сервер. И вот что я делаю сейчас - я вручную переместил фронты на public/css/fonts
, и мне пришлось вручную вводить разные @font-face
:
@font-face {
font-family: 'Glyphicons Halflings';
src: url("fonts/glyphicons-halflings-regular.eot");
src: url("fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("fonts/glyphicons-halflings-regular.woff") format("woff"), url("fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
Но правильно ли это? Тогда зачем нужен Компас, если мне приходится вручную разбираться со шрифтами и путями?
В config.rb
есть несколько параметров компаса для шрифтов. Как с их помощью заставить Compass заботиться о шрифтах и путях? Я пробовал эти параметры, но похоже, что они не работают, я не заметил никаких изменений в компиляции scss
=> css
, что бы я ни устанавливал. А документация довольно убогая.
fonts_dir =
fonts_path =
http_fonts_path =
http_fonts_dir =