css - 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)
)

这应该会显示任何错误。