How to get sourcemaps if all scss files are imported into one?

Question

Sass

Hello!

Set up project build using gulp. The project uses the SCSS preprocessor and all necessary scss files (bootstrap, native files) are imported in the main main.scss file. Import order matters.
But when viewed in a browser, it shows the line number in the main.css file

Part of 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());
});

Part of main.scss file

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

How can I set up the assembly to get the correct indication of the file in which the style is defined?

As I understand it, you can write a template src/scss/**/*.scss, but then the files will be collected in an uncontrolled order.
You can also supply gulp with an array with the desired file order, but the number of files is very large and I would not want to clog gulpfile with them + when adding a new file, you will have to restart the assembly.

Is there another way to tweak the build to get the desired result?

Answer 1

Sourcemaps