sourceComment in Gulp is showing path relative to computer, rather than folder

Question

I have been doing sourceComments for a project I am working with and the comments that get outputted in the CSS so that I can find the correct scss file are showing paths that are relatvie to my computer

e.g.

/* line 39, /Applications/MAMP/htdocs/usaa/bare-minimum/framework/scss/settings/_typography.scss */

I would like this to be

/* line 39, settings/_typography.scss */

How would I accomplish this when this is my gulpfile.js (showing here the sass function)

var sassSrc = './framework/scss/*.scss';
var watchSrc = './framework/**/*.scss';

function doSass(cb) {
  gulp.src([sassSrc, watchSrc], {
      base: 'framework/scss'
    })
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true,
      soureMap: 'scss',
      sourceComments: 'map'
    }).on('error', sass.logError))
    .pipe(cmq())
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dev/css/'))
    .pipe(cssmin())
    .pipe(rename({
      extname: '.min.css'
    }))
    .pipe(gulp.dest('dev/css/'))
    .on('end', function() {
      if (cb && typeof cb === 'function')
        cb();
    });
}
gulp.task('sass', doSass);

score 0 · Answer 1 · answered Feb 08 '17 at 19:04

Unfortunately it's not possible with LibSass. Answer from node-sass member:

With sourceComments option, libsass emits diagnostics information for each selector it encounters. It is supposed to be a raw debug info, hence the paths are not (relatively) resolved.

On a more serious note, this info emerges from core abstract syntax tree, where resolving canonical file paths will slow down the performance of the overall compilation.

For the browser dev tools aid, please use sourceMap option instead, as source-map carries relative paths.

Link to Github discussion

Discussion on libsass: Link

sourceComment in Gulp is showing path relative to computer, rather than folder

1 Answers1