how does $icon-font-path works in bootstrap scss?

Question

I recently started using bootstrap SCSS on my node project. So I have app/bower_components/bootstrap-sass/lib/_glyphicons.scss for example.

Looking at my CS

Answer 1

Both answers are correct. To sum it up, there's no magic. Bootstrap initializes $icon-font-path with a default value.

if you include bootstrap's SCSS in a manager that requires a different value for $icon-font-path you should also override their default value.

The syntax $icon-font-path: some_value !default; means - use this value if not already set.

So when you include you should do the following

/* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts; 
@include bower_components/bootstrap/bootstrap.scss;

paths might be different in real scenarios.

This seems to be a standard mechanism for publishing a reusable SCSS modules.