gulp.spritesmith中的路径有什么问题？

Posted 2021-04-20

我使用gulp.spritesmith制作精灵图像。我将sprite.sass导入main.sass，它似乎正在工作，除了图像路径有问题。我知道这可能是一个愚蠢的错误，但我无法弄清楚它是什么，所以如果你能帮助我，我真的很高兴。这是我的gulpfile片段

   gulp.task('sprite', function () {
  var spriteData = gulp.src('assets/img/icons/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.sass',
    imgPath: './assets/img/sprite.png' 
  }));
  spriteData.css.pipe(gulp.dest('./assets/sass/1-tools')); 
});

我包括图像

.services-item
    &-design
        @include sprite($heart-services)

这些是它在浏览器中的工作方式。

这是我的项目结构

答案

已经快2年了。希望你已经解决了。 AFAIK，在spritesmith的这些选项中，** imgPath **是相对于css文件的请求路径，而不是SASS / images源的项目结构。

假设您的精灵图像引用的css文件位于./assets/sass/文件夹中，并且您的图像位于./assets/img/中。在这种情况下，您可以尝试将imgPath选项更改为：

imgPath: '../img/sprite.png' //use .. back to assets folder, then go down to img folder