Gulp-SASS没编译

Question

我最近决定把我的gulp文件从使用LESS改成SaSS。我已经安装了gulp-sass并更新了我的gulpfile.js（或者我认为），并且在我制作它们时查看控制台中记录的更改，但由于某些原因，它似乎并未构建我的.css文件。我没有改变我的文件夹结构，所以我不知道为什么会发生这种情况。

任何意见，将不胜感激

var gulp = require('gulp'), 
    browserSync = require('browser-sync'), 
    reload = browserSync.reload, 
    concat = require('gulp-concat'), 
    rigger = require('gulp-rigger'), 
    sourcemaps = require('gulp-sourcemaps'), 
    sass = require('gulp-sass'), 
    watch = require('gulp-watch'); 

var path = { 
    build: { 
     html: 'build/', 
     js: 'build/js/', 
     style: 'build/', 
     img: 'build/img/', 
     lib: 'build/lib/', 
     fonts: 'build/fonts/' 
    }, 
    src: { 
     html: 'src/html/**/*.html', 
     js: 'src/js/*.js', 
     style: 'src/styles/**/*.scss', 
     img: 'src/img/**/*.*', 
     lib: 'src/lib/**/*.*', 
     fonts: 'src/fonts/**/*.*' 
    }, 
    watch: { 
     html: 'src/**/*.html', 
     js: 'src/**/*.js', 
     style: 'src/**/*.scss', 
     img: 'src/img/**/*.*', 
    }, 
    clean: './build' 
}; 

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

gulp.task('html', function() { 
    return gulp.src(path.src.html) 
     .pipe(rigger()) 
     .pipe(gulp.dest(path.build.html)) 
     .pipe(reload({stream: true})); 
}); 

gulp.task('style', function() { 
    return gulp.src(path.src.style) 
     .pipe(sass()) 
     .pipe(concat('app.css')) 
     .pipe(gulp.dest(path.build.style)) 
     .pipe(reload({stream: true})); 
}); 

gulp.task('image', function() { 
    return gulp.src(path.src.img) 
     .pipe(gulp.dest(path.build.img)) 
     .pipe(reload({stream: true})); 
}); 
gulp.task('fonts', function() { 
    return gulp.src(path.src.fonts) 
     .pipe(gulp.dest(path.build.fonts)) 
     .pipe(reload({stream: true})); 
}); 
gulp.task('vendor', function() { 
    return gulp.src(path.src.lib) 
     .pipe(gulp.dest(path.build.lib)) 
     .pipe(reload({stream: true})); 
}); 

gulp.task('js', function() { 
    return gulp.src(path.src.js) 
     .pipe(rigger()) 
     .pipe(sourcemaps.init()) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest(path.build.js)) 
     .pipe(reload({stream: true})); 
}); 

gulp.task('build', ['html', 'js', 'style', 'image', 'vendor', 'fonts']); 

gulp.task('watch', function(){ 
    watch([path.watch.html], function(event, cb) { 
     gulp.start('html'); 
    }); 
    watch([path.watch.style], function(event, cb) { 
     gulp.start('style'); 
    }); 
    watch([path.watch.js], function(event, cb) { 
     gulp.start('js'); 
    }); 
    watch([path.watch.img], function(event, cb) { 
     gulp.start('image'); 
    }); 
}); 

gulp.task('default', ['build', 'server', 'watch']); 

SASS

.grid-wrapper { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    position: relative; 
} 

.grid-item { 
    padding: 45px 45px 30px; 
    position: relative; 
    color: inherit; 
    background: $white; 
    min-height: 300px; 
    width: calc(100% - 90px); 
    cursor: pointer; 
    text-align: center; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-direction: normal; 
    -webkit-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-justify-content: center; 
    justify-content: center; 

    @media screen and (min-width: $bp-medium) { 
    width: calc(50% - 110px); 
    padding: 45px 55px 30px; 
    } 

    @media screen and (min-width: $bp-x-large) { 
    width: calc(33.333% - 110px); 
    } 

    @media screen and (min-width: $bp-xx-large) { 
    width: calc(25% - 110px); 
    } 

    @media screen and (min-width: $bp-xxx-large) { 
    width: calc(16.66% - 110px); 
    } 

    &:before { 
    position: absolute; 
    content: ''; 
    top: 0px; 
    right: 55px; 
    bottom: 0px; 
    left: 55px; 
    border-bottom: 1px solid rgba(74, 74, 74, 0.075); 

    @media screen and (min-width: $bp-medium) { 
     top: 5px; 
     right: 5px; 
     bottom: 5px; 
     left: 5px; 
     border: 1px solid rgba(74, 74, 74, 0.075); 
     -webkit-transition: opacity 0.3s; 
     transition: opacity 0.3s; 
    } 
    } 

    img { 
    max-width: 100px; 
    } 
} 

.grid-item-title { 
    margin: 0; 
    font-size: 1.875em; 
    text-align: center; 
    font-family: 'robotoregular', sans-serif; 
    color: $grey; 

    &:hover { 
    color: $black; 
    } 
} 

.grid-item-description { 
    margin: 0; 
    position: relative; 
    font-size: 0.95em; 
    font-style: italic; 
    text-align: center; 
    display: block; 
} 

SASS变量

// ---- Colors 
$black: #000000; 
$white: #ffffff; 
$grey: #7b7b7b; 


    // Text // 
$standard-text: #868c96; 
$dark-text: #575b61; 
$light-text: #b3b5b9; 

// ---- Transitions 
$transition-basic: 0.2s ease-in-out; 

// ---- Breakpoints 
$bp-xxx-large: 2100px; 
$bp-xx-large: 1800px; 
$bp-x-large: 1200px; 
$bp-large: 992px; 
$bp-medium: 768px; 
$bp-small: 480px; 
$bp-tiny: 320px; 

Answer 1

尝试更换：

.pipe(sass()) 

与

.pipe(sass() 
    .on('error', sass.logError) 
) 

这将显示任何错误。