Webpack 导入包括具有相对路径的字体

Question

在我的 Webpack 配置中，我为普通文件定义了一个资源根，如下所示：

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

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

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

所以，我的问题是：我可不可以在项目一开始就写绝对路径，这样Webpack就可以一直解析它，因为它不再是相对的了？我试过没有运气。我也试过指定 resolve.modules 和 resolve.alias 也没有运气。

Answer 1

要解决这个问题，只需要使用 resolve-url-loader:

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

请记住目前有必要在任何以前的加载器上启用sourceMap。就是这么简单。

Webpack 导入包括具有相对路径的字体

Webpack Import Including Font Face with Relative Path

css

url

fonts

font-face

webpack