SASS / source maps not loading with nested structures

Question

I went from all the SASS files being in the same directory, to a nested structure as follows. Now, when I inspect an element in chrome, it takes me to the incorrect source map. For example, when I inspect a button, instead of going to the _buttons partial, it goes to a different random partial that is unrelated. Anyone know why this is happening? Does something need to change in my gulp file?

Answer 1

You have *.scss files, but in your gulpjs config.input.sass. May be wrong files format.

I use compass and it looks like this

gulp.task('compass', function() {
    gulp.src(inputDir+'/*.'+fileType)
        .pipe(compass({
            css: outputDir,
            sass: inputDir,
            sourcemap: true
        }))
        .pipe(gulp.dest(outputDir))
        .pipe(connect.reload());
});

This is my working example. You can see generated main.css.map You need to install https://www.npmjs.com/package/gulp-sass https://www.npmjs.com/package/gulp-sourcemaps

Answer 2

https://www.npmjs.com/package/sass-module-importer

The issue had to do with how we were importing the sass and css files together in the main.scss file, and doing the copy of css files in the gulp file. The easiest solution was to include the sass-module-importer. The gulp file is updated below with the final solution.