@html_profi

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

Всем привет!

Настроил сборку проекта, используя 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 + при добавлении нового файла придется перезапускать сборку.

Есть ли другой способ настроить сборку, чтобы получить желаемый результат?
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы