gulp-sassでautoprefixerを併用するとsourcemapが書き出されない対策

このようなgulp-sassでsassをコンパイルし、gulp-autoprefixerでベンダープレフィックスを自動付与する設定があり

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('style', () =&amp;gt;
  gulp
    .src('/sassを置いているディレクトリ名/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('css出力先ディレクトリ名/'))
);

gulp-sourcemapsを追加してcssのsourceMapファイルを書き出すよう改造すると！
何も起こりません…

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('style', () =&amp;gt;
  gulp
    .src('/sassを置いているディレクトリ名/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(sourcemaps.write(.))
    .pipe(gulp.dest('css出力先ディレクトリ名/'))
);

sourcemapsのwriteとinitの設定を追加

このようにautoprefixerよりも前にsourcemapsの設定を追加したら、出力されるようになります。

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('style', () =&amp;gt;
  gulp
    .src('/sassを置いているディレクトリ名/**/*.scss')
    .pipe(sass())
    .pipe(sourcemaps.write({ includeContent: false }))
    .pipe(init({ loadMaps: true }))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write(.))
    .pipe(gulp.dest('css出力先ディレクトリ名/'))
);

sourcemapsのwriteとinitの設定を追加

関連記事