Как бороться со шрифтами в bootstrap-sass и compass? Как правильно включить шрифты на страницу?

В моем приложении 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 =

person Green    schedule 27.12.2015    source источник


Ответы (1)


Думаю, вы можете найти здесь свой ответ Bootstrap - Sass: относительный путь к значку глификонов

Версия TLDR заключается в том, что вы должны попытаться раскомментировать строку relative_assets в файле config.rb.

person Ben Edwards    schedule 27.12.2015