Webpack：将SVG文件连接到Symbol并为每个条目生成CSS（SASS）样式表

Question

问题在标题中。 我的Webpack配置：https://github.com/skutin/webpack4-simple-boilerplate

我正在尝试使用svg和symbol创建一个图标系统。 结果，我希望看到的是

输入： /src/icons/*.svg

输出：

1. /dist/symbols.svg-一个文件中的所有图标

2. /dist/css/icons.css的内容如下：

.icon-favorite {
    background-image: url(/dist/symbols.svg#favorite);
}

.icon-forward {
    background-image: url(/dist/symbols.svg#forward);
}

我发现https://github.com/kisenka/svg-sprite-loader的第一件事

但是我坚持基于文件列表生成CSS。

有什么想法吗？

更新：我正在从gulp迁移，所以这是我当前的代码，它显示了我的预期结果：https://gist.github.com/skutin/fa14e0a04713a065efcfa8fdc0af3db5