Question

我想将项目中的图标连接成一个精灵图像。我发现了一些解决方案但是所有这些解决方案都需要在我原来的CSS代码中使用css预处理mixins。我想要的是尽可能少地使用技术和库。

我的项目中有两个文件夹：

resources/
public/

它们都具有相同的结构：

images/
layouts/
scripts/
styles/
...

我在资源/ 文件夹中工作。我通常会写HTML，CSS，JS。当我从Photoshop / Sketch剪切它时，我将图像存储在那里。我在浏览器中打开这个文件夹的HTML文件，一切都很好。所有资源都不是压缩而不是优化。我不使用任何预处理器或观察者。

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

所以在我原来的 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);
}

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

当我完成工作时，我希望看到我的公共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

但它不适用于矢量图形。

来自backgound-image url的图像精灵，没有预处理器，mixins，观察者等等

1 个答案: