gulpでsassを依存関係を解決してコンパイルしたい

Question

前提・実現したいこと

下記のようなファイル構成で、indexとaboutは_commonを@importしているとします。
・_common.scss
・index.scss
・about.scss
しかし_commonを変更してもindexやaboutは書き出されないため、
各ファイルを個別にコンパイルするか、
ターミナル上でgulp sassのようにコマンドを実行をするしかありません。

理想としては、_commonを変更したら、
index.scssとabout.scssを一気にコンパイルしたいです。

gulp-progenyというのを見つけて試してみたのですが、
エラーが出てしまいダメでした。
よろしくお願いいたします。

試したこと

・gulp-progeny
参考：gulpでCSSの差分ビルド（https://qiita.com/73cha/items/270e2dc33c63292dd184）

該当のソースコード

■gulpfile.babel.js

// 使用しているプラグイン
import gulp from 'gulp';
import browserify from 'browserify';
import babelRegister from 'babel-register';
import babelify from 'babelify';
import watchify from 'watchify';
import browserSync from 'browser-sync';
import progeny from "gulp-progeny";
// gulp-****　系のプラグインを一気に読み込む
import gulpLoadPlugins from 'gulp-load-plugins';
// gulp-****　系のプラグインを$.****で呼び出せるように
const $ = gulpLoadPlugins();

gulp.task('sass', () => {
// ↓もともとは読み込み専用（_*.scss）は除外してました
// gulp.src(['src/scss/**/*.scss','!src/scss/**/_*.scss'])
  gulp.src(['src/scss/**/*.scss'])
  .pipe($.cached('sass'))
// ↓を試してみたけどエラーがでます
  .pipe($.progeny())
/*
Users/username/works/html/clientname/app/dev/node_modules/progeny/index.js:106
          return val.match(last)[1];
                     ^
TypeError: Cannot read property 'match' of null
*/
  .pipe($.plumber({
    handleError: function(err) {
      console.log(err);
      this.emit('end');
    }
  }))
  .pipe($.sass())
  .pipe($.pleeease({
      sass: true
  }))
  .pipe($.rename({
    suffix: '.min',
    extname: '.css'
  }))
  .pipe(gulp.dest('./dest/css'));
});

/////////////////////////////
// watch
/////////////////////////////

// brower sync
gulp.task('browser-sync', () => {
  browserSync.init({
    port: 9000,
    server: {
		baseDir: "./dest/",
      index  : "index.html"      //インデックスファイル
    }
	  });
});

gulp.task('bs-reload', () => {
	browserSync.reload();
});

// default
gulp.task('default', ['browser-sync'], () => {
//gulp.task('default', () => {
	$.watch('src/scss/**/*.scss', () => { return gulp.start(['sass','bs-reload'])});
});

補足情報（FW/ツールのバージョンなど）

■package.json

{
  "name": "dev",
  "version": "1.0.0",
  "description": "gulp template",
  "main": "gulpfile.babel.js",
  "author": "author name",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.3.1",
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-register": "^6.26.0",
    "babelify": "^8.0.0",
    "bootstrap": "^4.1.2",
    "browser-sync": "^2.24.5",
    "browserify": "^16.2.2",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-browserify": "^0.5.1",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^3.2.0",
    "gulp-connect-php": "^1.0.3",
    "gulp-ejs": "^3.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-notify": "^3.2.0",
    "gulp-pleeease": "^2.0.2",
    "gulp-plumber": "^1.2.0",
    "gulp-progeny": "^0.4.1",
    "gulp-rename": "^1.3.0",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.0",
    "gulp-useref": "^3.1.5",
    "gulp-watch": "^5.0.0",
    "imagemin-pngquant": "^5.1.0",
    "jquery": "^3.3.1",
    "npm": "^6.1.0",
    "watchify": "^3.11.0"
  },
  "devDependencies": {
    "slick-carousel": "^1.8.1"
  }
}

Answer 1

babelの記法がわからないので読み替えて下さい。

「sass-module-importer」をインストールして、「sass-module-importer」をgulpfileに読み込む。

const moduleimporter = require('sass-module-importer');

あとは、

.pipe(sass())
　　　
　　　↓

.pipe(sass({
      importer: moduleimporter()
}))