gulp.spritesmithのパスに問題がありますか？

Question

gulp.spritesmithを使ってスプライト画像を作成しました。 main.sassにsprite.sassをインポートしましたが、画像へのパスに問題があることを除いて動作しているようです。私はそれはおそらく愚かな間違いであることを知っていますが、私はそれが何であるか把握することができないので、私はあなたが私を助けることができれば本当に素晴らしいだろう。ここ は私gulpfileフラグメントは、私がイメージ

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

含めてだとこれらは、それがブラウザでどのように動作するかです

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

です。

は、ここに私のプロジェクト構造

Answer 1

であることは、ほぼ2年ぶりです。あなたがすでにそれを解決したことを願っています。 AFAIKは、スプライトスミスのこれらのオプションのうち、** imgPath **は、SASS/imagesソースのプロジェクト構造ではなく、cssファイルに対するリクエストパスです。

あなたのスプライト画像の参照を含むCSSファイルを仮定は、フォルダ./assets/sass/であり、そして、あなたのイメージは、./assets/img/です。この場合、imgPathオプションを次のように変更してみてください。

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