Question

我需要内联SVG（目前使用<svg><use xlinkHref="icons.svg#info" /></svg>精灵处理）和SVG用作CSS中的背景（background-image: url(/assets/svg/info.svg);）。

我想实现文件名的散列以帮助缓存清除，这在CSS的情况下工作正常，使用以下内容：

{
  test:   /\.svg$/i,
  loader: 'file-loader',
  query: {
    name: 'svg/[name]-[sha512:hash:base64:7].[ext]',
    publicPath: PATHS.public
  }
}

但是，我还希望能够内联参考各个SVG图标，同时确保源文件具有散列文件名。

有没有人采取万无一失的方法来充分利用这两个世界？

最终我希望有一个SVG文件的源文件夹，在构建期间是：

谢谢，丹

Answer 1

事实证明，问题非常简单，我没有在客户端和服务器javascript上运行sass加载器。

虽然我一直在解决这个问题，但我一直在保留一个单独的演示存储库，以便为服务器和客户端构建一个良好的起始位置，使用Webpack实现React，并为资产提供良好的生产准备处理

希望有所帮助！