PostCSSのインストールができているけど実行できない

Question

前提・実現したいこと

プログラミング初学者です。稚拙な質問すみません。
SASSの学習をしていて、PostCSSをインストールしてAutoprefixerを追加したいのですが、
postcssがうまく実行できていないのか、コンパイルしようとしてもエラーになってしまいます。

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

<コマンドプロンプト>
\Sass_project2>gulp sass
[20:37:19] Using gulpfile ~\OneDrive\デスクトップ\Sass_project2\gulpfile.js
[20:37:19] Starting 'sass'...
[20:37:19] gulp-notify: [Error running Gulp] Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
Notifications are disabled
Reason: DisabledForUser Please make sure that the app id is set correctly.
Command Line: C:\Users\rytmy\OneDrive[20:37:19] Finished 'sass' after 74 ms

該当のソースコード

<gulpfile.js>
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

 
gulp.task('sass', function() {
  return gulp.src('./sass/**/*.scss')
  .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(sourcemaps.init())
    .pipe(sassGlob())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});


<package.json>
{
  "name": "Sass_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "gulp": "^4.0.2",
    "gulp-notify": "^4.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sass-glob": "^1.1.0",
    "gulp-sourcemaps": "^3.0.0"
  }
}

試したこと

①postcssをインストール。⇒コンパイルできたが、ベンダープレフィックスは付与されず。（とりあえずpostcssインストール前に戻してます）

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

var postcss = require('gulp-postcss');のpostcssにカーソルを合わせると以下のようなメッセージが表示されます。

(alias) function postcss(plugins?: any[], options?: GulpPostCss.Options): NodeJS.ReadWriteStream (+1 overload)
(alias) namespace postcss
import postcss

Answer 1

gulp-postcssに内包されたpostcssのバージョンが7.xなのが原因で最新のautoprefixerとの相性が悪いみたいですね。
autoprefixerのバージョンを下げる方法が紹介されてます。
https://qiita.com/oreo3@github/items/d49237a4a1d68dc00720