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

Question

在我的Webpack配置中，我为这样的常见文件定义了一个资源根：

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

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

但是，如果此文件包含相对于@font-face编写的src/components/_common指令（上面的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。就这么简单。