gulp sourcemaps not pointing to sass but css

Question

I have this gulp setup

require('es6-promise').polyfill();

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var mmq = require('gulp-merge-media-queries');
var prefix = require('gulp-autoprefixer');

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

var autoPrefixerOptions = {
    browsers: ['last 2 version', '> 1%', 'ie 9']
};

gulp.task('sass', function() {
    gulp.src('./scss/**/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(mmq())
      .pipe(prefix(autoPrefixerOptions))
      .pipe(sourcemaps.write('../maps', {includeContent: false, sourceRoot: '../../ui-dev/scss'}))

      .pipe(gulp.dest('../Content/v2.0'));
});

gulp.task('watch', function() {
    gulp.watch('./scss/**/*.scss', ['sass']);
});

gulp.task('default', ['sass', 'watch']);

my structure is as follows

|-Content
  |-maps
  |-v2.0
    |-- compiled css files here
|-dev
  |-gulpfile.js
  |-scss
    |-.scss files

everything builds as expected except that all my .map files reference the .css in Content/v2.0 directory and not the .scss files in the dev folder.

What I understand source mapping to be is that it should point to a line number in the original file (being scss) for easier debugging.

How do I fix this or am I missing something?

UPDATE

So I realized I was missing the sourceRoute but because my sass is broken up in hundreds of files in directories a couple levels deep, browsers still don't pick up the maps because the path reads "../../ui-dev/scss" in all the maps.

How can I get the correct path for each source file?

So upon further searching I found this - http://stackoverflow.com/questions/34090352/gulp-sourcemaps-not-writing-expected-sourcemap?rq=1 - I thought that might have been my problem but I'm already on gulp-sass version 2.2.0. Also the gulpfile looks very similar to mine and that answer was marked as correct. Any other ideas? — wind_kind, Feb 24 '16 at 18:10
More on this. I figured out I'm missing a step in my gulp setup so updated that. I set the sourceRoot. This leaves me with another issue that needs figuring out. — wind_kind, Feb 25 '16 at 12:36

score 0 · Answer 1 · answered Feb 25 '16 at 14:37

0

I just ended up compiling each folder separately and defining the path the source like that until I find a better way.

answered Feb 25 '16 at 14:37

wind_kind

561
6
23

gulp sourcemaps not pointing to sass but css

UPDATE

1 Answers1