前提
Laravel8
↓jetstreamのインストール手順の参考
https://readouble.com/jetstream/1.0/ja/installation.html
jetstream、warningの出ているパッケージの内容、解決に使用したパッケージの内容の詳細については調べていないので、解説しておりません。
現象
`npm run dev'の手順の際に以下のようなwarningがコンソールに出力されました。
3 WARNINGS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 3 warnings
解決策
ヒントで、何か設定変更して詳細が見れるようにしろ!みたいなん書いてるけど、どこに書くの?ってなりました。
どのファイルのどの部分に書けばいいかを書いて欲しいよね!
- どのファイル? webpack.mix.jsに
- どの部分? 末尾に追記
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]);
if (mix.inProduction()) {
mix.version();
}
// 以下が追記した内容
mix.webpackConfig({
stats: {
children: true,
},
})
これでもう一度npm run dev
を実行すると
// 最後に以下のようにwarningの詳細が主力するようになりました。
WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Child mini-css-extract-plugin /work/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!/work/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!/work/resources/css/app.css compiled with 3 warnings
webpack compiled with 3 warnings
autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.のwarningで共通している
autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
この内容が共通で表示されています。
どうやら、color-adjustっていう表記がどっかにあるようですが、非推奨になっているので、print-color-adjustに変えろってことみたいですね。
公式通りやってるのに。。。
とりあえず上記のメッセージで検索してみますと下のサイトがヒットし、それ通りにやれば解決しました。
https://stackoverflow.com/questions/72083968/1-warning-in-child-compilations-use-stats-children-true-resp-stats-child
下記コマンドを実行すればいいって書いてあったので、実行した後に再度npm run dev
を実行。
$ npm install autoprefixer@10.4.5 --save-exact
$ npm run dev
(省略)
Child mini-css-extract-plugin /work/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!/work/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!/work/resources/css/app.css compiled successfully
webpack compiled successfully
Warningが消え、webpack compiled successfullyと最後に出ているので、解決!
参考にしたサイト