Gulp ruby-sass y autoprefixer no se llevan bien

post css to css

Question

Tengo una tarea de styles en mi gulpfile:

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''));
});

que genera esto en la consola:

[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

SI comento el conducto para el autoprefixer, no hay errores, todo se compila. ¿Cuál es el trato aquí?

Tenga en cuenta que tampoco puedo desactivar la escritura de un mapa fuente. Probé todas las otras configuraciones de la página repo para grunt-ruby-sass y ninguna funciona.

Puedo vivir sin autoprefixer, pero me encantaría hacerlo funcionar ...

Answer 1

En lugar de:

browsers: [''last 2 versions''],

Prueba esto:

browsers: [''last 2 version''],

Si eso no funciona, he tenido mejor suerte con gulp-sass y 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''))

Answer 2

El problema parece estar relacionado con main.css.map , incluso si no lo deseaba, usando [email protected] en el momento en que escribo esto.

He encontrado dos soluciones diferentes hasta ahora:

1) Si no necesita Sourcemaps:

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''));
});

Esto es lo que he usado ya que recientemente me encontré con este problema.

2) Si necesitas los mapas de origen:

Entonces deberías probar [email protected]

( tema relevante de Github )