Gulp.js: Using 'debug_info' in gulp -sass

Question

I am trying to get the line numbers of my SASS file in my compiled CSS file. According to docs , I have to set debug_infoto true, but it doesn't work at all.

// Styles
gulp.task('styles', function() {
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass({errLogToConsole: true}))
    .pipe(sass({ style: 'expanded', debug_info: true }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('build/dev/css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/production/css'));
});

Does anyone know if this is possible using the gulp-sass plugin?

Answer 1

Perhaps for gulp-sassI would say that what SteveLacy points out is the solution you are looking for.

In your code, it will look like this:

// Styles
gulp.task('styles', function() {
 return gulp.src('src/sass/**/*.scss')
   .pipe(sass({errLogToConsole: true}))
   .pipe(sass({ 
      style: 'expanded',
      sourceComments: 'normal'
    }))
   .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
   .pipe(gulp.dest('build/dev/css'))
   //.pipe(minifyCSS())
   .pipe(gulp.dest('build/production/css'));
});

Please note that gulp-minify-csswill strip any comments added gulp-sass, so I commented on this.

Answer 2

gulp-sass node-sass SASS-.

node-sass Docs, 'debug_info'. /, , , , .

: https://github.com/andrew/node-sass/issues/196

Answer 3

you can use gulp-ruby-sass . I use it in my projects with debugging information and line numbers:

var sass = require('gulp-ruby-sass');
...
// Styles for Development (Watch-Process)
gulp.task('styles-dev', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({
        debugInfo   : true,
        lineNumbers : true,
        loadPath    : 'src/styles',
        style       : 'expanded'
    }))
    .pipe(gulp.dest('dist/styles'));
});
...

Ciao ralf