在 Webpack 中使用 SVG 片段标识符

Question

在我的项目，我想使用SVG片段标识符，如建议在这里，意思是：

我希望能够在我的 SVG 文件中定义一个 ViewBox：

<view id="icon-clock-view" viewBox="0 0 32 32" />

我想像这样访问我的 CSS 中的 ViewBox：

.icon-heart {
      background: url(mySvg.svg#icon-heart-view) no-repeat;
}

这是一个可以完美运行的 CodePen。但是一旦我将它与 webpack 捆绑在一起，就无法解析 URL (net::ERR_INVALID_URL)。

如果我从非本地源 ( background: url("https://[path].svg)加载 svg 资源它正在工作，所以我认为它似乎是我包含在我的项目中的文件加载器无法处理像#icon-heart-view.

我已经发现的：

• svg-url-loader 但这也不起作用。
• 还有一个名为 svg-sprite 的 npm 模块，它创建 svg spritesheets。但是因为我只有加载 svg 时遇到问题，所以这似乎有点过头了。

是否有可以处理 SVG 片段标识符的 webpack 加载器？