gulpを使用しsassのコンパイル処理をおこなったところ、エラーが出ました。

Question

前提・実現したいこと

gulpでsassをコンパイルしたいと考え、必要な記述を「gulpfile.js」に書き込み、
[$ npx gulp sass] で実行しました。しかしエラーメッセージが出ました。

発生している問題・エラーメッセージ

Error in plugin "gulp-sass"
Message:

gulp-sass no longer has a default Sass compiler; please set one yourself.
Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:

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

[17:13:10] The following tasks did not complete: sass
[17:13:10] Did you forget to signal async completion?

該当のソースコード

gulpfile.jsは以下の通りです。

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

gulp.task('sass', () => {
  return gulp.src('./src/sass/common.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'))
})

該当のソースコード

package.jsonは以下の通りです。＊一部省略

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^5.1.0"
  }
}

試したこと

sassタスクを登録する前に、

const gulp = require('gulp')

gulp.task('default', (done)=>{ done() } )

上記の記述で。defaultタスクを登録し、動作確認等をおこないました。
（gulpに手を出すのは初めてなので、動作学習などの手順も踏んでおります）
defaultタスク時は、
(done) => {done()}
を使用したコールバック関数によるタスク終了の記述をおこない、
エラーを出すことなく実行することができました。

しかしsassコンパイル時に使用した「return」を使用した、
タスク終了の記述で、エラーが発生しました。

バージョンなど

Nodeのバージョン：v11.13.0
gulpのバージョン : Local version: 4.0.2

Answer 1

該当ソースコード

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

gulp.task('sass', () => {
  return gulp.src('./src/sass/common.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'))
})

の２行目を変更し、

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

gulp.task('sass', () => {
  return gulp.src('./src/sass/common.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'))
})

にすることで、エラーがでなくなりました。

Answer 2

エラーメッセージに対処法が書かれています。

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

Comments

[contact]

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

を直接gulpfile.jsに記述すればいいということでしょか。