对于 SASS 中包含的包，使用 webpack 正确的 @font-face 路径？答案

【问题标题】：Correct @font-face paths with webpack for a package included with SASS?对于 SASS 中包含的包，使用 webpack 正确的 @font-face 路径？
【发布时间】：2017-01-03 03:16:19
【问题描述】：

我有一个 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 文件，以便它的变量等可用，但也让它更正字体文件的路径吗？自定义模块是我自己的，所以我可以更改它的代码，但我不想将它更改为无意义的东西。

【问题讨论】：

标签： npm sass webpack

【解决方案1】：

我遇到了同样的问题。您可以做的是创建一个 your-font.scss 文件来伴随您的字体，并在您的应用程序的基本文件中导入 your-font.scss 文件一次，而不是再次将其导入另一个 .scss 中。这样您的网址就会正确。

【讨论】：