Gulp ruby-sass 和 autoprefixer 不能相处答案

【问题标题】：Gulp ruby-sass and autoprefixer do not get alongGulp ruby-sass 和 autoprefixer 不能相处
【发布时间】：2015-01-20 01:04:34
【问题描述】：

我的 gulpfile 中有一个 styles 任务：

gulp.task('styles', function () {
  var sass = require('gulp-ruby-sass');
  var autoprefixer = require('gulp-autoprefixer');
    return gulp.src('app/styles/main.scss')
    .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
    .on('error', function (err) { console.log(err.message); })
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('.tmp/styles'));
});

在控制台中生成：

[14:25:21] Starting 'styles'...
[14:25:21] gulp-ruby-sass: stderr: DEPRECATION WARNING: Passing --sourcemap without a value is    deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
[14:25:21] gulp-ruby-sass: directory
[14:25:25] gulp-ruby-sass: write main.css
  write main.css.map

  events.js:72
    throw er; // Unhandled 'error' event
          ^
  Error: /Users/stevelombardi/Documents/command-central/ccgulp/main.css.map:3:3: Unknown word

如果我将管道注释掉到 autoprefixer，没有错误，一切都会编译。这里有什么关系？

注意，我似乎也无法禁用源映射的写入。我尝试了 grunt-ruby-sass 的 repo 页面中的所有其他设置，但没有任何工作。

我可以在没有自动前缀的情况下生活，但很想让它工作......

【问题讨论】：

sass 文件是否正确编译且没有错误？
如果 AP 被注释掉，它们就是。
stackoverflow.com/questions/26979433/…

标签： sass gulp gulp-sass autoprefixer

【解决方案1】：

问题似乎与 main.css.map 有关，即使您不想要，在我写这篇文章时使用 gulp-ruby-sass@0.7.1。

到目前为止，我遇到了两种不同的解决方案：

1) 如果您不需要需要源地图：

gulp.task('styles', function() {
    gulp.src('app/styles/main.scss')
        .pipe(sass({
            "sourcemap=none": true // hack to allow auto-prefixer to work
        }))
        .pipe(prefix("last 2 versions"))
        .pipe(gulp.dest('css'));
});

这是我最近遇到这个问题时使用的。

2) 如果您确实需要源地图：

那你应该试试gulp-ruby-sass@1.0.0-alpha

(relevent github issue)

【讨论】：

【解决方案2】：

代替：

browsers: ['last 2 versions'],

试试这个：

browsers: ['last 2 version'],

如果这不起作用，我对 gulp-sass 和 gulp-sourcemaps 的运气会更好。

// Compile Sass & create sourcemap
.pipe(sourcemaps.init())
    .pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))

// Autoprefix, load existing sourcemap, create updated sourcemap
.pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer('last 2 version')
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('css'))

【讨论】：