gulp with gulp-ruby-sass: Error: ../style.css.map:3:1: Unknown word

Question

Getting a strange error using a basic gulp/express build watch.

Directory Layout

 project/
   - sass/
      - style.scss
   - gulpfi         


        

Answer 1

Disabling sourcemaps is some kind of mystery right now. You have to do it like this

.pipe(sass({ "sourcemap=none": true }))

Source

Answer 2

Try upgrading to gulp-ruby-sass 1.0.0-alpha. It uses gulp-sourcemaps and should avoid all iterations of this problem.

Answer 3

I was having the same issue with the gulp-ruby-sass plugin. I found this blog post which explains that there are a couple of bugs in the gulp-ruby-sass plugin regarding source maps. They have both been closed a little over a week ago. If you upgrade to gulp-ruby-sass~1.0.0-alpha this should fix the issues your having with source maps.

If that doesn't work the article I linked to above shows how to use the gulp-sass plugin which which doesn't have the source map issue.

Answer 4

I fixed this problem keeping the source maps and using gulp-filter:

var filter = require('gulp-filter')
var filterCSS = filter('**/*.css');

gulp.task('styles', function() {
    return gulp.src('sass/*.scss')
      .pipe(sass({ style: 'expanded', sourcemap: true }))

      // Filters only css files before auto prefixing
      .pipe(filterCSS)
      .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
      .pipe(filterCSS.restore())

      .pipe(gulp.dest('css'))
      .pipe(rename({suffix: '.min'}))
      .pipe(minifycss())
      .pipe(gulp.dest('css'));
});

Answer 5

Not entirely sure why this fixes it, but changing the autoprefixer pipe to:

.pipe(autoprefixer({
     browsers: ['last 2 versions'],
     cascade: false
}))

and putting it before the sass pipe (top) allows it to build succesfully.