Как получить sourcemaps, если все scss файлы импортируются в одни?

Question

[Павел]

Всем привет!

Настроил сборку проекта, используя gulp. В проекте используется препроцессор SCSS и все необходимые scss файлы(bootstrap, собственные файлы) импортируются в главном main.scss файле. Порядок импорта имеет значение.
Но при просмотре в браузере, показывает номер строки в файле main.css

Часть gulpfile.js

gulp.task('styles', () => {
    return gulp.src('src/scss/main.scss')
        .pipe(gulpIf(env === "dev", sourcemaps.init()))
            .pipe(concat('main.scss'))
            .pipe(sass().on('error', sass.logError))
            .pipe(autoprefixer({cascade: false}))
            .pipe(gcmq())
            .pipe(gulpIf(env === "prod", cleanCSS({level: 2})))
        .pipe(gulpIf(env === "dev", sourcemaps.write()))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

Часть главного файла main.scss

@import "variables";
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "sceleton";
@import "header";
...
@import "footer";

Как можно настроить сборку, чтобы получать корректное указание на файл в котором определяется стиль?

Я так понимаю, можно написать шаблон src/scss/**/*.scss, но тогда файлы будут собираться в неконтролируемом порядке.
Можно еще gulp подавать массив с нужным порядком файлом, но количество файлов очень большое и не хотелось бы засорять им gulpfile + при добавлении нового файла придется перезапускать сборку.

Есть ли другой способ настроить сборку, чтобы получить желаемый результат?

Comments

[Виталий Першин]

gulp-rigger уже давно не актуален, попробуйте gulp-inject

[Максим Сохряков]

Пробуйте 'gulp-sourcemaps'.
На версии gulp 4- работает прекрасно.
Для 4+ не могу дать ответа.

[Павел]

Максим Сохряков, его и использую)) Версия Gulp 4

Answer 1

[Александр Викторович]

Sourcemaps