Gulp.spritesmith'deki yolun nesi yanlış?

Question

Sprite görüntüsü oluşturmak için gulp.spritesmith'i kullandım. Sprite.sass'i main.sass'a aktardım ve resimlere giden bir yol dışında bir problem dışında çalışıyorum. Biliyorum, belki biraz aptalca bir hata ama ne olduğunu anlayamıyorum, bu yüzden bana yardım edersen gerçekten müthiş olurdum. İşte benim gulpfile parçası

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')); 
}); 

Ben görüntüyü

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

dahil ediyorum Ve tarayıcıda nasıl çalıştığını bu olmasıdır.

İşte benim proje yapısı

Answer 1

olduğunu Neredeyse 2 yıl oldu. Umarım zaten çözmüşsün. AFAIK, spritesmith'in bu seçenekleri arasında, ** imgPath **, SASS/görüntü kaynağının proje yapısından ziyade css dosyasına göre istek yoludur.

hareketli grafik görüntü referansını içeren senin css dosyasını varsayalım klasöre ./assets/sass/ olduğunu ve resim ./assets/img/ içindedir. Bu durumda imgPath seçeneğini değiştirmeyi deneyebilirsiniz:

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