如何在 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]')
    }
  },

它对我来说工作正常，但 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

您可能想要使用 sass-loader and the resolve-url-loader 的某种组合。

您的 webpack 加载器配置将如下所示：

module.exports = {
  module: {
    loaders: [
      {
        test   : /\.scss$/,
        loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
      }
    ]
  },
  resolveUrlLoader: {
      absolute: '/prefix'
  }
};

Answer 2

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

关键是让 Webpack 找到您在 url() 语句中指定的所有资产。到那时 resolve-url-loader 就完成了。永远不需要 absolute 选项，因为您应该始终设置 Webpack 以查找所有 "modules"，包括资产。

默认情况下（我不是 Webpack 专家）所有 css 和资产都被复制到输出并且正确的相对路径被重写到 css url()声明。

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

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

How to set the specific prefix for file-loader in webpack?

javascript

css

webpack