CSSで画像が表示されない

Question

私はgulpで一連の作業をしていますが、何らかの理由でCSS画像が出力されません。ここ

var 
    source = 'source/', 
    dest = 'build/', 

    html = { 
     in: source + '*.html', 
     watch: [source + '*.html', source + 'template/**/*'], 
     out: dest, 
     context: { 
      devBuild: devBuild, 
      author: pkg.author, 
      version: pkg.version 
     } 
    }, 

    images = { 
     in: source + 'images/*.*', 
     out: dest + 'images/' 
    }, 

    imguri = { 
     in: source + 'images/inline/*', 
     out: source + 'scss/images/', 
     filename: '_datauri.scss', 
     namespace: 'img' 
    }, 

    css = { 
     in: source + 'scss/main.scss', 
     watch: [source + 'scss/**/*', '!' + imguri.out + imguri.filename], 
     out: dest + 'css/', 
     sassOpts: { 
      outputStyle: 'nested', 
      imagePath: '../images', 
      precision: 3, 
      errLogToConsole: true 
     }, 
     pleeeaseOpts: { 
      autoprefixer: { browsers: ['last 2 versions', '> 2%'] }, 
      rem: ['16px'], 
      pseudoElements: true, 
      mqpacker: true, 
      minifier: !devBuild 
     } 
    }, 

    fonts = { 
     in: source + 'fonts/*.*', 
     out: css.out + 'fonts/' 
    }, 

    js = { 
     in: source + 'js/**/*', 
     out: dest + 'js/', 
     filename: 'main.js' 
    }, 

    syncOpts = { 
     server: { 
      baseDir: dest, 
      index: 'index.html' 
     }, 
     open: false, 
     notify: true 
    }; 


console.log(pkg.name + ' ' + pkg.version + ', ' + (devBuild ? 'development' : 'production') + ' build'); 


gulp.task('clean', function() { 
    del([ 
     dest + '*' 
    ]); 
}); 


gulp.task('html', function() { 
    var page = gulp.src(html.in).pipe(preprocess({ context: html.context })); 
    if (!devBuild) { 
     page = page 
      .pipe(size({ title: 'HTML in' })) 
      .pipe(htmlclean()) 
      .pipe(size({ title: 'HTML out' })); 
    } 
    return page.pipe(gulp.dest(html.out)); 
}); 


gulp.task('images', function() { 
    return gulp.src(images.in) 
     .pipe(newer(images.out)) 
     .pipe(imagemin()) 
     .pipe(gulp.dest(images.out)); 
}); 


gulp.task('imguri', function() { 
    return gulp.src(imguri.in) 
     .pipe(imagemin()) 
     .pipe(imacss(imguri.filename, imguri.namespace)) 
     .pipe(gulp.dest(imguri.out)); 
}); 


gulp.task('fonts', function() { 
    return gulp.src(fonts.in) 
     .pipe(newer(fonts.out)) 
     .pipe(gulp.dest(fonts.out)); 
}); 


gulp.task('sass', ['imguri'], function() { 
    return gulp.src(css.in) 
     .pipe(sass(css.sassOpts)) 
     .pipe(size({title: 'CSS in '})) 
     .pipe(pleeease(css.pleeeaseOpts)) 
     .pipe(size({title: 'CSS out '})) 
     .pipe(gulp.dest(css.out)) 
     .pipe(browserSync.reload({ stream: true })); 
}); 


gulp.task('js', function() { 
    if (devBuild) { 
     return gulp.src(js.in) 
      .pipe(newer(js.out)) 
      .pipe(jshint()) 
      .pipe(jshint.reporter('default')) 
      .pipe(jshint.reporter('fail')) 
      .pipe(gulp.dest(js.out)); 
    } 
    else { 
     del([ 
      dest + 'js/*' 
     ]); 
     return gulp.src(js.in) 
      .pipe(deporder()) 
      .pipe(concat(js.filename)) 
      .pipe(size({ title: 'JS in '})) 
      .pipe(stripdebug()) 
      .pipe(uglify()) 
      .pipe(size({ title: 'JS out '})) 
      .pipe(gulp.dest(js.out)); 
    } 
}); 


gulp.task('browserSync', function(){ 
    browserSync.init({ 
    server:{ 
     baseDir: "build/" 
    }, 
    }) 
}); 


gulp.task('default', ['html', 'images', 'fonts', 'sass', 'js', 'browserSync'], function() { 

    gulp.watch(html.watch, ['html', browserSync.reload]); 

    gulp.watch(images.in, ['images']); 

    gulp.watch(fonts.in, ['fonts']); 

    gulp.watch([css.watch, imguri.in], ['sass']); 

    gulp.watch(js.in, ['js', browserSync.reload]); 
}); 

は、私はそれがフォルダ/ファイルの場所に関係していると信じてCSS

#features { 
    width: 100%; 
    padding: 5vh 5vw; 
    background: $color-dark image-url("3.jpg") 50% 50% no-repeat; 
    background-size: cover; 

です。

Answer 1

CSSは次のようになります。

background: $color-dark url("3.jpg") no-repeat 50% 50%; 

なく

background: $color-dark image-url("3.jpg") 50% 50% no-repeat;