html - 来自 background-image url 的图像 sprite，没有预处理器、mixins、watchers 等

Question

我想将元素中的图标连接成一个单独的 Sprite 图像。我找到了一些解决方案，但所有解决方案都需要在我的原始 CSS 代码中使用 css 预处理混合或其他东西。我想要的是尽可能少地使用技术和库。

我的元素中有两个文件夹:

resources/
public/

两者具有相同的结构:

images/
layouts/
scripts/
styles/
...

我在 resources/ 文件夹中工作。我通常写 HTML、CSS、JS。当我从 Photoshop/Sketch 中剪切图像时，我将它们存储在那里。我在浏览器中从此文件夹打开 HTML 文件，一切正常。所有资源均未压缩且未优化。我不使用任何预处理器或观察器。

当我完成工作或部分工作时，我会使用一些插件运行 GULP。它将所有资源复制到 public/ 文件夹中并压缩、合并、优化它们。我想在此步骤中创建图像 Sprite 。

所以在我原来的 resources/ 文件夹中，我希望我的 CSS 看起来像这样:

.facebook-icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/facebook-icon.svg);
}
.bubble-peak {
    width: 10px;
    height: 10px;
    background-image: url(../images/bubble-peak.png);
}

它会让我正常工作。我可以在页面上看到图像而无需编译。只需在浏览器中编写代码并刷新页面即可。

当我完成工作后，我想像这样查看我的公共(public) CSS:

.facebook-icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/sprite.svg);
    background-position: -100px -500px;
}
.bubble-peak {
    width: 10px;
    height: 10px;
    background-image: url(../images/sprite.png);
    background-position: -500px -100px;
}

是否可以使用任何库或 GULP 插件？

非常感谢!

Answer 1

名为 postcss-sprites 的

postCSS 插件可以解决这个问题: https://github.com/2createStudio/postcss-sprites

但它不适用于矢量图形。