невозможно импортировать шрифт в файл sass с помощью Webpack и Vue.js

Question

У меня есть проект Vue.js с шаблоном Webpack .У меня есть компонент с именем " HelloWorld ", который находится в папке компонентов.Я импортирую файл style.scss в компонент и в style.scss Я импортирую шрифты , которые я хочу.но что-то странное. Когда я импортирую шрифты в зависимости от того, куда импортирую style.scss (компонент HelloWord), он работает, но не должен.

, но когда я импортирую шрифты на основе фактического адреса, онне работает.

это структура моего проекта:

Я хочу импортировать шрифты из общей папкив папку module2.

это работает, потому что я импортировал style.scss в HelloWorld

$fpath: "../../common/assets/fonts/"; // **based on HelloWorld**

$name: 'iranSans/IranSans';
@font-face {
  font-family: 'IranSans';
  src: url('#{$fpath}#{$name}.eot');
  src: local('#{$name}'),
  url('#{$fpath}#{$name}.ttf') format('truetype'),
  url('#{$fpath}#{$name}.woff') format('woff'),
  url('#{$fpath}#{$name}.woff2') format('woff2');
}

этоне работает но должен

$fpath: "../fonts/";

$name: 'iranSans/IranSans';
@font-face {
  font-family: 'IranSans';
  src: url('#{$fpath}#{$name}.eot');
  src: local('#{$name}'),
  url('#{$fpath}#{$name}.ttf') format('truetype'),
  url('#{$fpath}#{$name}.woff') format('woff'),
  url('#{$fpath}#{$name}.woff2') format('woff2');
}