使用相对路径导入字体的Webpack配置

Question

在我的Webpack配置中，我正在定义一个资源根目录，用于共享文件，如下所示：

{
  loader: 'sass-loader',
  options: {
    includePaths: [
      'node_modules',
      'src/components/_common'
    ]
  }
}

现在我有一个文件，例如在资源根目录中的_fonts.scss文件，可以使用@import "fonts";导入它。这非常有效。

然而，如果此文件包含相对于src/components/_common（与上述Webpack配置中的路径相同）编写的@font-face指令，则该字体 URL 的文件加载将无法正常工作。 Webpack 无法解析此URL，因为它假定它是基于实际导入_fonts.scss文件的路径编写的，而这不是src/components/_common。

那么，我的问题是：是否可能从项目开始就编写完整的路径，以便Webpack始终可以解析它，因为它不再是相对路径？我尝试过但没有成功。 我也尝试过使用resolve.modules和resolve.alias指定但也没有成功。

- dude

---

专业提示：仅仅因为你可以这样做，并不意味着你应该将静态资源捆绑到JS包中。如果你的包发生了变化，你的静态资源仍然是静态资源，不应该在包内部，这样人们需要重新下载整个站点，而他们的浏览器应该只缓存这些文件。不要捆绑图像、字体、CSS等。从CDN或同一服务器上并行智能地提供这些内容。 - Mike 'Pomax' Kamermans

Answer 1

为解决此问题，只需使用resolve-url-loader：

https://github.com/bholloway/resolve-url-loader

请记住，目前需要在任何先前的加载程序上启用sourceMap。这很简单。

- dude