在我的项目中，我想使用SVG片段标识符，如here中所提议的，意思是：

我希望能够在我的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;
}

Here is a 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加载器？

css svg webpack