Question

我有一个webpack项目：

main.js
project.scss

在我的项目根目录中，我还有一个名为my-package的自定义NPM包。我是字体和使用它们的SASS文件：

my-package/fonts/font.woff
my-package/fonts/font.woff2
my-package/fonts.scss

在fonts.scss中：

@font-face {
  font-family: $myfont;
  src:
  url('./fonts/font.woff2') format('woff2'),
  url('./fonts/font.woff') format('woff');
}

我已尝试将fonts.scss导入project.scss：

在project.scss

中

@include "./my-package/fonts.scss";

然而，字体的路径是错误的。因为它只是一个SASS包含相对于project.scss的路径，所以它需要这个工作：

@font-face {
  font-family: $myfont;
  src:
  url('./my-package/fonts/font.woff2') format('woff2'),
  url('./my-package/fonts/font.woff') format('woff');
}

我可以让webpack导入SASS文件，以便它的变量等可用，还能让它更正字体文件的路径吗？自定义模块是我自己的，所以我可以更改它的代码，但我不想将其更改为荒谬的东西。

Answer 1

我有同样的问题。您可以做的是创建一个 your-font.scss 文件以附加您的字体并将 your-font.scss 文件导入应用程序的基本文件中，而不是再次将它导入另一个.scss。这样你的网址就会正确。

对于SASS附带的软件包，使用webpack更正@ font-face路径？

1 个答案: