Go to Qiita Advent Calendar 2024 Top

14

More than 3 years have passed since last update.

@oreo3(ながたく)

【gulp エラー】Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.

Last updated at 2020-09-30Posted at 2020-09-18

エラーが発生した状況

npm で autoprefixer を v9 から v10 にアップデートし、gulp のCSSタスク(postcss関連含む)を走らせた時に発生

原因

autoprefixer v10 で、必要とする postcss が v8 以上となった
gulp-postcss(v8.0 ２年前から更新されていない) が依存している postcss が v7 のためエラーとなる
補足：postcss-cli も同様らしい

一時的な対処法

★★TODO: 後でちゃんと対処(時間がないのでとりあえず)

autoprefixer のバージョンを9の最新版に下げる
- npm uninstall autoprefixer
- npm install --save-dev autoprefixer@9.8.6

解決法メモ (未検証)

gulp-postcss の処理を、postcss で直接処理させるよう置き換える？
補足：一応 node.js を最新版(v14.11.0)にアップデートしておく
gulpプラグインではない素の postcss 最新版(v8.x.x) をインストール npm install --save-dev postcss
gulp-postcss の処理を、postcss で直接処理させるよう置き換え
正常に動作していることを確認後、gulp-postcss を削除

// @link https://www.npmjs.com/package/autoprefixer#javascript
// 参考用
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
 
postcss([ autoprefixer ]).process(css).then(result => {
  result.warnings().forEach(warn => {
    console.warn(warn.toString())
  })
  console.log(result.css)
})

参考記事

14

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

14