Я не могу получить глоток, чтобы произвести карту scouce - PullRequest
Новая
       28

Я не могу получить глоток, чтобы произвести карту scouce

0 голосов
/ 07 апреля 2019

Я пытаюсь запустить простую задачу 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();
});

Любая помощь с благодарностью.

1 Ответ

0 голосов
/ 07 апреля 2019

Вы должны запустить исходную карту перед компиляцией 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}));
});
...