検証画面にてscssの行数が表示されない

gulp-sourcemapsをインストールし、gulpfile.jsにも記述をしているのですが、
検証画面にてscssの行数が表示されず困っています。
下記URLの最後の部分を参考にgulpfile.jsを作成したのですが記述箇所がおかしいのでしょうか、、？
.pipe()で繋がるように記述したのですが、、
わかる方、ご教示いただけると幸いです。
https://ics.media/entry/3290/

JS
1// gulpプラグインを読み込みます
2const { src, dest, watch } = require("gulp");
3// Sassをコンパイルするプラグインを読み込みます
4const sass = require("gulp-sass");
5const sourcemaps = require('gulp-sourcemaps');
6
7/**
8 * Sassをコンパイルするタスクです
9 */
10const compileSass = () =>
11  // style.scssファイルを取得
12  src("dev/sass/style.scss")
13    // Sassのコンパイルを実行
14    .pipe(sourcemaps.init()) //gulp.srcの直後に指定
15    .pipe(
16      // コンパイル後のCSSを展開
17      sass({
18        outputStyle: "expanded"
19      })
20    )
21    .pipe(sourcemaps.write())  // gulp.destの直前に指定
22    // cssフォルダー以下に保存
23    .pipe(dest("dev/css"));
24
25/**
26 * Sassファイルを監視し、変更があったらSassを変換します
27 */
28const watchSassFiles = () => watch("dev/sass/style.scss", compileSass);
29
30// npx gulpというコマンドを実行した時、watchSassFilesが実行されるようにします
31exports.default = watchSassFiles;