Question

我是Foundation和Sass的初学者。我慢慢了解它的运作方式。工作流程似乎很棒，但这是我的“问题”。

编译我的SCSS后，只要保存.scss文件，我的CSS就会缩小。

我试图关闭Gulp任务，但它没有做任何事情。

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/normalize.scss/sass',
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/*.scss')
    .pipe($.sass({
      includePaths: sassPaths,
//      outputStyle: 'compressed' 
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);
});

有什么想法吗？

Answer 1

通过查看你的任务，他们不应该是缩小你的CSS的任何一部分。你可以试试几件事：

1）尝试outputStyle: 'expanded'

2）尝试编译你的sass而不包括任何bower sass文件，因为其中一个可能已经缩小（尽管不太可能）。或者甚至只是手动检查它们。

3）或者最后尝试这个配置：

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/normalize.scss/sass',
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src',
  'scss/*.scss'
];

gulp.task('sass', function() {
  return gulp.src(sassPaths)
    .pipe($.sass({
      outputStyle: 'expanded' 
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);
});

Foundation6在编译时关闭SASS自动缩小

1 个答案: