Laravel9でLaravel Breezeを使おうとしたら Error: PostCSS plugin postcss-import requires PostCSS 8.

# 概要
Laravel9で遊んでいて、tailwindを試すついでにLaravel Breezeも試してみようと思い立ち、ドキュメント通りにやってみたら
`copy(/var/www/html/resources/css/app.css): Failed to open stream: No such file or directory`
`PostCSS plugin postcss-import requires PostCSS 8.`
などのエラーが出て詰まった。
そのときの解決方法についてまとめる。

# 動作確認環境
開発環境はDockerで構築している。
```
PHP 8.1.3
Laravel 9.5.1
node 16.14.2
```


# 事象①　`resources/css/app.css`なんてファイルないよ
composerでLaravel Breezeを追加後、artisanコマンドを叩こうとしたら、 `resources/css/app.css`なんてファイルは存在しないよと言われた。
```
root@95c1c27ffa4e:/var/www/html# php artisan breeze:install

   ErrorException 

  copy(/var/www/html/resources/css/app.css): Failed to open stream: No such file or directory

  ➜  66▕         copy(__DIR__.'/../../stubs/default/resources/css/app.css', resource_path('css/app.css'));
     67▕         copy(__DIR__.'/../../stubs/default/resources/js/app.js', resource_path('js/app.js'));
     68▕
     69▕         $this->info('Breeze scaffolding installed successfully.');
     70▕         $this->comment('Please execute the "npm install && npm run dev" command to build your assets.');

      +15 vendor frames
  16  artisan:37
      Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
```

## 解決方法
これは警告の通り、 `resources/css/app.css` が存在しなかったため、書き込めなかったらしい。
(このプロジェクトでは当初、テストコードを書く練習をしていたためCSSなどはCDNで済ませており、`resources/css/app.css` を作成していなかった。)
空の `resources/css/app.css` を作成して再度実行すると、無事にインストールが完了し、コンパイルしてねと言われる。
```
root@95c1c27ffa4e:/var/www/html# php artisan breeze:install
Breeze scaffolding installed successfully.
Please execute the "npm install && npm run dev" command to build your assets.
```

`resources/css/app.css`を確認すると、tailwindを読み込むための記述がされている。

```scss:resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```


# 事象② コンパイルしようとすると`PostCSS plugin postcss-import requires PostCSS 8.`エラー
Laravel Breezeをインストール後、指示通りに `run dev` しようとしたらこのようなエラーが出た。
ちなみにinstallされていたのはtailwind3系と、postcss関連は8系だった。
```
haruna-nagayoshi@S759:~/projects/laravel_tdd_training$ docker-compose run --rm training_node run dev
Creating laravel_tdd_training_training_node_run ... done
yarn run v1.22.18
$ npm run development

> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                       7:32:27 AM

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-import requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/var/www/html/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/var/www/html/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/var/www/html/node_modules/postcss/lib/postcss.js:55:10)
    at /var/www/html/node_modules/postcss-loader/src/index.js:140:12
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at /var/www/html/node_modules/webpack/lib/NormalModule.js:316:20
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /var/www/html/node_modules/postcss-loader/src/index.js:208:9
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-import requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/var/www/html/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/var/www/html/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/var/www/html/node_modules/postcss/lib/postcss.js:55:10)
    at /var/www/html/node_modules/postcss-loader/src/index.js:140:12

 @ ./resources/css/app.css 2:14-142

     Asset     Size   Chunks             Chunk Names
/js/app.js  706 KiB  /js/app  [emitted]  /js/app

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-import requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/var/www/html/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/var/www/html/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/var/www/html/node_modules/postcss/lib/postcss.js:55:10)
    at /var/www/html/node_modules/postcss-loader/src/index.js:140:12
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at /var/www/html/node_modules/webpack/lib/NormalModule.js:316:20
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /var/www/html/node_modules/postcss-loader/src/index.js:208:9
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-import requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/var/www/html/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/var/www/html/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/var/www/html/node_modules/postcss/lib/postcss.js:55:10)
    at /var/www/html/node_modules/postcss-loader/src/index.js:140:12
 @ ./resources/css/app.css 2:14-142
npm notice 
npm notice New patch version of npm available! 8.5.0 -> 8.5.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.5
npm notice Run npm install -g npm@8.5.5 to update!
npm notice
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: 2

```

## 解決方法
最後に参考記事を貼るが、どうやらpostcss周りのバージョンに互換性がないから起こるものらしい。
一度下記3つのライブラリを削除する。

```
docker-compose run --rm training_node remove tailwindcss postcss autoprefixer
```

バージョンを下げて再度追加する。
```
docker-compose run --rm training_node add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

これでもエラーの内容が変わらなかったので、postcss-importのバージョンも下げてみることにする。
postcss-importを削除する。
```
docker-compose run --rm training_node remove postcss-import
```

githubで確認したところpostcss7に対応しているのはpostcss-import12だったので、とりあえず入れてみる。
```
docker-compose run --rm training_node add postcss-import@^12
```

再度実行すると、
```
haruna-nagayoshi@S759:~/projects/laravel_tdd_training$ docker-compose run --rm training_node run dev
 DONE  Compiled successfully in 17077ms                                                                                                                                                                                       2:16:27 PM

       Asset      Size   Chunks             Chunk Names
/css/app.css  3.83 MiB  /js/app  [emitted]  /js/app
  /js/app.js   705 KiB  /js/app  [emitted]  /js/app
npm notice
npm notice New patch version of npm available! 8.5.0 -> 8.5.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.5
npm notice Run npm install -g npm@8.5.5 to update!
npm notice
Done in 19.93s.
```

コンパイルできた！もしかしたらpostcss-importのバージョンを下げるだけでよかったのかもしれないが、postcss-import12はpostcss7に依存しているので全体的に下げないとだめだと思われる。
2020年時点で同様の記事が散見されるが、いまだに対応していないのか、Laravel Breeze側の問題なんだろうか・・。

## 参考記事
- [[TailwindCSS] Error: PostCSS plugin tailwindcss requires PostCSS 8.](https://qiita.com/morimorig3/items/fb29bd4d0318b0909d0b)
- [Tailwind CSS エラー「Error: PostCSS plugin postcss-nested requires PostCSS 8.」が発生した場合](https://mebee.info/2021/03/23/post-32231/)
- [Error: PostCSS plugin tailwindcss requires PostCSS 8](https://stackoverflow.com/questions/64925926/error-postcss-plugin-tailwindcss-requires-postcss-8)



PhpStormでtailwindの補完がきくようにしたいが、Tailwind CSS Smart Completionsプラグインを入れても補完がされないのが目下の悩み・・。