Question

我想找到webpack css sprites插件，它允许我定义我想在sprite图像中使用的图像列表，并以通用方式引用这些图像。

即。在我的CSS中我会写这样的东西：

some-selector-a {
    ...
    background-image: url('images/home.png');
    ...
}

some-selector-b {
    ...
    background-image: url('images/mail.png');
    ...
}

插件应该从引用的图像构建精灵图像并执行相应的CSS修改：

some-selector-a {
    ...
    background-image: url('sprites.png');
    background-position: -16px 0px;
    background-repeat: no-repeat;
    ...       
}

some-selector-b {
    ...
    background-image: url('sprites.png');
    background-position: -32px 0px;
    background-repeat: no-repeat;
    ...       
}

Answer 1

可以使用postcss和easysprites插件（或任何其他类似的插件postcss-sprites）。

您需要在webpack配置中为postcss部分中的css文件（postcss-loader）和docs添加enable plugin：

var easysprite = require('easysprite');
...
postcss: function () {
   return [easysprite];
}

Answer 2

简短回答是否定的 - 基于我寻找相同事物的经验。有一个webpack插件（我认为它是一个插件，它可能是一个加载器），它会精神打印目录中的所有文件，但这并不是你想要的webpack - 一个好的解决方案会在您加载图像引用时自动生成它们，并适当修改您的CSS源。

好消息是我写了一个装载机来做到这一点。坏消息是它尚未公开 - 希望我能尽快开源。

是否存在具有所述行为的webpack插件？

2 个答案: