Sass/Scss font path variable

[mdo]

Would you consider adding the ability to generate font URLs for Sass/Scss that include a $font-path variable? This would help with our Bootstrap Icons project where we want folks to be able to import our project as a dependency and configure to their setup. As far as I can tell this feature isn't available yet.

$bi-font-path: "./fonts" !default;

@font-face {
  font-family: "bootstrap-icons";
  src: url("#{$bi-font-path}/bootstrap-icons.woff2?8bd4575acf83c7696dc7a14a966660a3") format("woff2"),
       url("#{$bi-font-path}/bootstrap-icons.woff?8bd4575acf83c7696dc7a14a966660a3") format("woff");
}

X-ref: https://github.com/twbs/icons/issues/563

/cc @XhmikosR

[tancredi]

Can you do that using the fontUrl option?

Otherwise, I think considering the size of your project, I would think that having a custom template for SCSS would make aa lot of sense (you probably don't want to rely on the defaults forever) - if neither of these are solutions you like, happy to help

[mdo]

Totally forgot to reply to you here @tancredi. We already use a custom template, but I don't think it's possible to have different fontUrl options for CSS and SCSS, and I don't think there's a way to get a separate {{ hash }} either. Right now we're doing this in our scss.hbs:

${{ name }}-font: "{{ name }}" !default;
${{ name }}-font-dir: "{{ fontsUrl }}" !default;
${{ name }}-font-file: #{${{ name }}-font-dir}/#{${{ name }}-font} !default;
${{ name }}-font-hash: "{{ hash }}" !default;
${{ name }}-font-src: url("#{${{ name }}-font-file}.woff2?#{${{ name }}-font-hash}") format("woff2"), url("#{${{ name }}-font-file}.woff?#{${{ name }}-font-hash}") format("woff") !default;

@font-face {
  font-display: block;
  font-family: ${{ name }}-font;
  src: ${{ name }}-font-src;
}

.{{prefix}}::before,
[class^="{{prefix}}-"]::before,
[class*=" {{prefix}}-"]::before {
  display: inline-block;
  font-family: ${{ name }}-font !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

${{ name }}-map: (
{{# each codepoints }}
  "{{ @key }}": "\\{{ codepoint this }}",
{{/ each }}
);

{{# each codepoints }}
.{{ ../prefix }}-{{ @key }}::before { content: map-get(${{ ../name }}-map, "{{ @key }}"); }
{{/ each }}