javascript - 如何在 webpack 中设置 file-loader 的特定前缀？

Question

我有带有字体的 sass 文件:

$icons-font-path: "~material-design-icons/iconfont/";

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(#{$icons-font-path}/MaterialIcons-Regular.woff2) format('woff2');
}

以及将字体下载到特定目录的文件加载器 (/home/user/project/example/src/static/fonts/):

  {
    test: /\.(woff|woff2|eot|ttf)$/,
    loader: 'file',
    query: {
      name: path.join(STATIC_PATH, 'fonts', '/[name]-[hash].[ext]')
    }
  },

它对我来说工作正常，但 out css 在 url 中有相同的路径，比如:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(/home/user/project/example/src/static/fonts/MaterialIcons-Regular.woff2) format('woff2');
}

如何将 woff2 复制到特定目录并为 url(prefix/MaterialIcons-Regular.woff2) 设置特定前缀？

Answer 1

resolve-url-loader将允许您指定您的字体 url() 相对于您的 .sass 文件。 .css 应该有一个 Webpack 可以解析为模块的路径 url。

关键是让 Webpack 找到您在 url() 语句中指定的所有 Assets 。到那时，resolve-url-loader 就完成了。绝对不需要 absolute 选项，因为您应该始终设置 Webpack 以查找所有“模块”，包括 Assets 。

默认情况下(我不是 Webpack 专家)所有的 css 和 Assets 都被复制到输出，正确的相对路径被重写到 css url() 语句。

我认为您的问题的关键类似于 CDN 部署，您需要一些绝对前缀。如果是这种情况，请查看 public path属性(property)。我自己没有使用过它，但它似乎是相关的。