はじめに
Laravel Mixで開発中に、CSSが機能していないことに気づいて、機能させるまで時間を要したので、備忘録として記載してます。
※CSSを機能させるために、PostCSSを使用しています。
開発状況（Version）
macOS Big Sur
Laravel Mix 5.0
Laravel 6.20.4
PHP 7.3.29
node.js 16.13.2
Vue.js 2.6.14
※ココから先のシェル名の「Bash」となっている箇所は全て「zsh」です。
ブログのコードエディターの言語設定に「zsh」がないため、「Bash」にしています。
CSSを機能させる方法（PostCSS使用）
PostCSSとは、CSSを変換するための強力なツールであり、Laravel Mixにはじめから含まれています。デフォルトで、Mixは人気のあるAutoprefixerプラグインを利用して、必要なすべてのCSS3ベンダープレフィックスを自動的に適用します。ただし、アプリケーションに適したプラグインを自由に追加できます。（Laravel 8.x アセットのコンパイル(Mix) 抜粋）
webpack.mix.js
webpack.mix.jsファイルに下記が記載されていること。
※基本的に、Lravel Mixをインストールすると、自動で記載されている。。。はずです。
mix.postCss('resources/css/app.css', 'public/css');ちなみに、プラグインなど入れたい場合は、こう↓書きます。
※CSSファイルへのパスを最初の引数に取り、コンパイルしたファイルを配置するディレクトリを２番目の引数に取ります。
mix.postCss('resources/css/app.css', 'public/css', [
//ここにプラグインを記載する
]);Bladeファイルに、CSSファイルが読み込まれるように記載
基本は、app.blade.phpを親に設定していると思うので、app.blade.phpの<head></head>中に、<link>を使用して、読み込まれるように設定する。
今回機能させたいstyle.cssファイルまでの構造
---抜粋---
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
@yield('title')
</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="/css/style.css"> //ココ追加
</head
---抜粋---最後に
公式ドキュメントや、色々な参考記事を確認した結果、
まさかのapp.blade.phpのstylesheet漏れした。。。初歩中の初歩のミス。書いたつもりだったんですが。これにたどり着くまで、1時間は要しました。。。
こういうしょうもないミスが、開発時間の増大になっています。最初に流れを追って確認すればまだ早く解決したんだろうなと思いました。
コメント