Почему Gulp SourceMap работает некорректно?

Question

[Andreas Shopen]

Запускаю сборку проекта, всё компилит отлично. Изначально есть несколько scss файлов и они компилятся в css, но почему-то среди всех плагинов не работаю карты sourcemap. При выборе элемента с помощью инструментов разработчика отображается правильный scss файл, но справа в селекторе указана огромная вложенность и написано "строка 1", хотя там далеко не первая строчка, выбранынй селектор где-то 50-й.

Comments

[Евгений Кузнецов]

Приложи галп-таск, пожалуйста

[Andreas Shopen]

Евгений Кузнецов, сейчас с 0 настроил проект пустой - вроде работает, но тут же в свой старый проект иду и снова строка 1 :(

const gulp = require('gulp');
const sass = require('gulp-sass');
const sourceMaps = require('gulp-sourcemaps');
const watch = require('gulp-watch');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const plumber = require('gulp-plumber');


gulp.task('sass-compile', function () {
	return gulp.src('scss/main.scss')
	.pipe(plumber())
	.pipe(sourceMaps.init())
	.pipe(autoprefixer({
		browers: ['last 2 version']
	}))
	.pipe(sass().on('error' , sass.logError))
	.pipe(sourceMaps.write())
	.pipe(gulp.dest('./css/'))
	.pipe(browserSync.stream())
});

gulp.task('watch', function(){
	browserSync.init({
		server: {
			baseDir: '/html/проект #4/'
		}
	})
	gulp.watch('./scss/**/*.scss', gulp.series('sass-compile'))
	gulp.watch('./*.html').on('change', browserSync.reload)
});

[Andreas Shopen]

Евгений Кузнецов, иногда просто ссылается на css, а не на scss, как будто как ему захочется так и выводит карту...

Answer 1

[Евгений Кузнецов]

я бы сделал так:
1. обновить все пакеты, используемые в таске со стилями, до последней версии
2. поменять местами autoprefixer и sass
3. записать sourcemaps отдельным файлом

в итоге так:

gulp.task('sass-compile', function () {
  return gulp.src('scss/main.scss')
  .pipe(plumber())
  .pipe(sourceMaps.init())
  .pipe(sass().on('error' , sass.logError))
  .pipe(autoprefixer({
    browers: ['last 2 version']
  }))
  .pipe(sourceMaps.write('.'))
  .pipe(gulp.dest('./css/'))
  .pipe(browserSync.stream())
});