久しぶりの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系にダウンし、とりあえず問題は解決しました。