无法使用Webpack和Vue.js在sass文件中导入字体

Question

我有一个带有 Webpack 模板的 Vue.js 项目。 我在components文件夹中有一个名为“ HelloWorld ”的组件。 我在组件中导入了 style.scss 文件，并在 style.scss 中导入了所需的 fonts 。 但是有些奇怪 当我根据导入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');
}