Я пытаюсь запустить простую задачу Gulp для вывода css и создания исходной карты. Преобразование в css работает нормально, но когда я открываю консоль разработчика, css по-прежнему отображается как полученный из файлов style.css, а не из файлов .scss, как я ожидал. Я проверил «Включить исходные карты CSS» в настройках браузера. Вот мой код:
// compile all sass files to css
gulp.task('sass', function(done){
return gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass({outputStyle: 'expanded'})) // Converts Sass to CSS with gulp-sass
.pipe(sourcemaps.init()) // create sourcemaps
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css')) // save to the 'app' directory
done();
});
Любая помощь очень ценится.
Вы должны инициировать исходную карту перед компиляцией вашего sass:
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css'));
});
Обратите внимание, что с Gulp 4 вам больше не нужен пакет gulp-sourcemaps, и вместо этого вы можете сделать:
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss', {sourcemaps: true})
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('app/css', {sourcemaps: true}));
});