在Webpack开发环境中的文件夹中维护CSS图像的最佳实践？

Question

我正在一个项目中，将其中包含在一个文件夹中的图像作为CSS类提供。例如：

- Images/
---- Icons/
-------- email.png
-------- menu.png

像这样，我将使用以下输出创建CSS文件：

.icons-email {
    background-image: url(images/icons/email.png);
    display: inline-block;
    width: 30px;
    height: 30px;
}
.icons-menu {
    background-image: url(images/icons/menu.png);
    display: inline-block;
    width: 30px;
    height: 30px;
}

以上内容将在首次运行webpack配置时通过插件创建。它们将与其他SASS文件中的@extend一起使用，并且易于在vue模板中使用，只需在Vue模板中写下要使用的类名即可。

现在让我们夸张一下，说有大约2000多个图像，所以我最终得到了相当大的CSS文件。我确实遇到了一个问题，其中css-loader解析了css中的每个URL（...），从而导致 “超出了最大调用堆栈大小” 之所以有用，是因为我可以将图像移动到构建文件夹中，并且CSS在构建后将具有正确的相对路径。

有更好的方法吗？您是否有一大堆图像转换为CSS图像并可供使用？

谢谢！