PostCSS Loaderのバージョンアップでエラーが・・・

2021-01-15 11:18

久しぶりのwebpack + Vue + SCSSのプロジェクトということもあり、これまでの記事を読み返しながら環境構築・・・環境構築

環境構築:macOS Mojaveにwebpackをインストール
環境構築:webpackを拡張
Instagramの写真埋め込みスクリプトをVueにしてみました。

問題発生!!

新たに環境を構築したわけだから、様々なモジュールがバージョンアップしてしまっているのは当然といえば当然。
いきなり、PostCSS Loaderでエラーです(泣。

PostCSS Loaderとは

PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。PostCSS まとめ

現在の環境

webpackバージョン 4.41.5
webpack-cliバージョン 3.3.10

新しくインストールされたPostCSS Loaderのバージョンは4.0.4
バージョンアップする前は3.0.0

メジャー番号が変わってしまってますね・・・

エラー内容

先日までのwebpack.config.jsの設定

webpack.conig.js
... // ローダーの設定 module: { rules: [ ... { test: /¥.scss$/, use: [ ... { loader: 'postcss-loader', options: { sourceMap: true, plugins: [ require('autoprefixer')({}) ] } }, ... ] }, ] } ...

この設定でコンパイルした結果・・・

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap? }

pluginsというプロパティは存在しない・・・というエラーです。

オプションの設定方法が変わったみたいです。

ドキュメント:webpack.js.org - postcss-loader

解決策

pluginsプロパティはpostcssOptionsプロパティ配下に変更されてます。

変更後の設定は

webpack.conig.js
... // ローダーの設定 module: { rules: [ ... { test: /¥.scss$/, use: [ ... { loader: 'postcss-loader', options: { sourceMap: true, postcssOptions: { plugins: [ require('autoprefixer')({}) ] } } }, ... ] }, ] } ...

この変更でPostCSS Loaderは機能するんだろうけど、上記の通りAutoprefixerプラグインを使っていて、インストールされているAutoprefixerのバージョンは10.0.1でした。

確かな原因はよく分かっていないんだけど・・・Autoprefixerの最新バージョン(10.x系)だと、相性が悪くエラーになってしまいます。

Autoprefixerのバージョンを9.x系にダウンし、とりあえず問題は解決しました。