Gulp SASS Sourcemap источники неверны

Question

Я изо всех сил пытаюсь заставить мои исходные карты SASS работать правильно. Кажется, проблема заключается в атрибуте "sources" в исходной карте и в том, как вложены мои файлы SASS.

У меня есть задача Gulp, которая компилирует SASS в CSS. Вот пример этого

var paths = {
    styles: {
        src: './Stylesheets/SCSS/',
        files: './Stylesheets/SCSS/**/*.scss',
        dest: './Stylesheets/CSS/'
    }
}

gulp.task('compile-sass', function (){
    return gulp.src(paths.styles.files)
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed',
            includePaths : [paths.styles.src]
        }))
        .pipe(prefix({
            browsers: ['last 2 Chrome versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('../Maps/', {
            includeContent: false,
            sourceRoot: '../SCSS'
        }))
        .pipe(gulp.dest(paths.styles.dest));
});

Вышесказанное работает для всего остального - записи карт на диск, префиксов и т. Д. Я использую последние версии nodejs, gulpjs и соответствующие пакеты npm.

Пример структуры папок / активов в моей папке Stylesheets:

SCSS/print.scss  
SCSS/sectionA/style.scss  
SCSS/sectionA/partial/_partialA.scss  
SCSS/sectionA/partial/_partialB.scss  
SCSS/sectionB/... etc

Для файлов SASS в корне SCSS / исходные карты работают правильно. Chrome покажет, где находятся исходные стили.

Для файлов SASS в подпапке в SCSS / исходные карты не работают. Проблема в "источниках": в атрибуте указан неверный файл.

Например, карта print.scss будет правильно иметь "sources":["print.scss"], Но карта sectionA/style.scss будет иметь "sources":["style.css"] вместо "sources":["partial/_partialA.scss", "partial/_partialB.scss"] как я и ожидал.

Я подтвердил перемещение /SCSS/sectionA/style.scss в /SCSS/style.scss и внесение поправок в любые пути импорта действительно решает проблему. Но мне нужно, чтобы он был вложенным, а не в корне /SCSS.

Если я могу предоставить более подробную информацию, пожалуйста, дайте мне знать. Я попытался ответить на вопрос " Путь к исходной карте" неправильно, и это не решило мою проблему. Я также пытался манипулировать mapSources безрезультатно.

Answer 1

@ Обновление 2017-03-08

После экспериментов с PostCSS я использовал CSSNext для обработки CSS после того, как SASS конвертировал его. Автоматические префиксы CSSNext и выполнение этих действий сохраняют соединение с исходными файлами scss в исходной карте.

Смотрите мой репозиторий GitHub для примера.

---

После получения отзывов Марка и изучения модуля gulp-autoprefixer, я считаю, что эта проблема, возникшая в GitHub-репозитории для gulp-autoprefixer, связана с некорректной проблемой sourceroot.

Используя вариант взлома ByScripts, я могу получить исходные карты с правильным sourceroot для вложенных файлов scss. Хак, использованный в gulpfile ByScripts, дважды выполняет функцию sourcemaps. Один раз перед префиксом и один раз после.

Я создал репозиторий GitHub, чтобы попытаться проиллюстрировать сокращенный контрольный пример и обходной путь. Проверка css, созданного обходным путем, показывает правильную связь с исходным scss.