Fixed SCSS url issue (replace string in gulp when processing CSS)

Author: timelytree

app/assets/scss/_herbs.scss

@@ -171,7 +171,7 @@
     }
     .herbIMG {
       @include centerImage;
-      background-image: url('../images/preloader.svg');
+      background-image: url('../../images/preloader.svg');
       background-size: 75px;
       width: 100%;
       padding-top: 100%;

gulpfile.js

@@ -5,6 +5,7 @@ var gulp = require('gulp'),
     concat = require('gulp-concat'),
     rename = require('gulp-rename'),
     uglify = require('gulp-uglify'),
+    replace = require('gulp-replace'),
     cleanCSS = require('gulp-clean-css');
 
 var config = {
@@ -26,6 +27,7 @@ gulp.task('scss', function() {
     .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
     .pipe(scss())
     .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(replace('app/', ''))
     .pipe(gulp.dest(config.cssDestPath))
 });
 

package.json

@@ -13,6 +13,7 @@
     "gulp-plumber": "*",
     "gulp-prettify": "*",
     "gulp-rename": "^1.2.2",
+    "gulp-replace": "^0.5.4",
     "gulp-sass": "*",
     "gulp-uglify": "^2.1.2",
     "gulp-useref": "*"