Foundation6 编译时关闭 SASS 自动缩小答案

【问题标题】：Foundation6 turn off SASS auto minify when compiledFoundation6 编译时关闭 SASS 自动缩小
【发布时间】：2017-02-27 16:52:53
【问题描述】：

我是 Foundation 和 Sass 的初学者。我慢慢了解它是如何工作的。工作流程看起来很棒，但这是我的“问题”。

编译我的 SCSS 后，我的 CSS 会在我保存 .scss 文件后立即缩小。

我尝试关闭 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']);
});

有什么想法吗？

【问题讨论】：

标签： sass gulp gulp-sass zurb-foundation-6

【解决方案1】：

从查看您的任务来看，它们不应该是缩小 CSS 的任何部分。您可以尝试几件事：

1) 试试outputStyle: 'expanded'

2) 尝试在不包含任何 bower sass 文件的情况下编译您的 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']);
});

【讨论】：