Для того чтобы получить sourcemaps для всех импортированных scss файлов, которые объединены в один файл, вам потребуется использовать Gulp.js и соответствующие плагины.
Sourcemaps - это файлы, которые отображают соответствие между исходным кодом и сгенерированным кодом. Они очень полезны при отладке и разработке, так как позволяют понять, где в исходном файле происходит определенное действие в скомпилированном коде.
Для начала, установите необходимые плагины Gulp.js:
npm install gulp gulp-sass gulp-sourcemaps --save-dev
После этого, создайте файл Gulp.js в корневой папке проекта и добавьте следующий код:
const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', () => {
return gulp.src('src/main.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css'));
});
gulp.task('watch', () => {
gulp.watch('src/**/*.scss', gulp.series('sass'));
});
gulp.task('default', gulp.series('sass', 'watch'));
В этом коде мы создаем задачу sass, которая компилирует файл main.scss в папке src в CSS и сохраняет его в папку dist/css. С помощью sourcemaps.init() мы инициализируем процесс создания sourcemaps, а затем, после компиляции, с помощью sourcemaps.write('.') записываем sourcemaps в тот же каталог, где сохраняется скомпилированный файл.
Мы также создаем задачу watch, которая отслеживает изменения во всех scss файлах в папке src и автоматически запускает компиляцию при изменении.
Наконец, мы добавляем задачу default, которая запускает задачи sass и watch последовательно.
Теперь, запустите Gulp.js, выполнив команду gulp в терминале. Каждый раз, когда вы сохраняете изменения в любом scss файле в папке src, Gulp.js автоматически скомпилирует файлы, создаст sourcemaps и сохранит их в папке dist/css.
Теперь вы можете использовать эти sourcemaps в инструментах разработчика вашего браузера, чтобы отображать соответствие между исходным кодом scss и сгенерированным CSS. Это поможет значительно облегчить процесс отладки и разработки ваших стилей.