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

Question

在我的 Webpack 配置中，我为这样的公共(public)文件定义了一个资源根目录:

{
  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 也没有运气。

Answer 1

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

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

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