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

10851 ワード

Breeze postcss Laravel9 tailwindcss Breeze テキストリンク

概要

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を読み込むための記述がされている。

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 [email protected] 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 [email protected] to update!
npm notice
Done in 19.93s.

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

参考記事

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

Author And Source

この問題について(Laravel9でLaravel Breezeを使おうとしたら Error: PostCSS plugin postcss-import requires PostCSS 8.), 我々は、より多くの情報をここで見つけました https://qiita.com/haruna-nagayoshi/items/c71ce24260a8d114c8de

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

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

概要

動作確認環境

事象① resources/css/app.cssなんてファイルないよ

解決方法

事象② コンパイルしようとするとPostCSS plugin postcss-import requires PostCSS 8.エラー

解決方法

参考記事

Author And Source

事象①　`resources/css/app.css`なんてファイルないよ

事象② コンパイルしようとすると`PostCSS plugin postcss-import requires PostCSS 8.`エラー