SASS - шрифт не работает с правильным путем

Question

Я недавно начал использовать SASS, и я хочу импортировать 2 шрифта, Montserrat и Open Sans. Обычно в CSS вы делаете что-то вроде

@font-face {
    font-family: 'Montserrat'
    src: url('../../webfonts/Montserrat.ttf');
}

И это работает просто отлично. Если моя файловая структура выглядит следующим образом

CSS
   Base
     typography.sass
Webfonts
   Montserrat.ttf

Но я помещаю следующий код в свой файл SASS.

@font-face
  font-family: 'Montserrat'
  src: url("../../webfonts/Montserrat.ttf")

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf")
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

Но шрифт не загружается. Я пытался подобный вопрос по этой теме, но ни один из них не был успешным для меня. В чем может быть эта проблема?

Answer 1

Если имя вашей папки Webfonts и вы ссылаетесь на него с url("../../webfonts/..., тогда у вас есть ответ (строчные и заглавные).

Кроме того, ваш пример кода приводит кАтрибут double src. Я не знаю, связано ли это с проблемой.

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf")
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

Приведенный выше код компилируется в это, где src перезаписывает себя каждый раз:

@font-face {
  font-family: "Open Sans";
  src: url("../../webfonts/OpenSans.ttf");
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype");
}

src Атрибут должен быть установлен только один раз, но вместо этого с несколькими значениями. Я думаю, что это будет работать в Sass:

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf"), url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")