Css 大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口

我最近决定将我的gulp文件从使用较少改为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变量

// ---- 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;

尝试更换：

.pipe(sass())

与

---

这将显示任何错误。

您是否收到任何错误消息？您还可以共享SASS代码吗？@Aziz没有错误。我已经发布了SASS和控制台的屏幕截图（如果有帮助的话）。请尝试丢失尾随/from

样式：“build/”，

@WilliamGeorge我试图在此处编译您的SASS：它会报告变量错误。。您必须在使用前定义变量。@Aziz抱歉，我忘记发布了。我确实定义了我的变量。我已将这些添加到帖子中。

.pipe(sass())

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