はじめに
Bootstrap Examples に Dashboard があります。
https://getbootstrap.com/docs/4.5/examples/dashboard/
その Dashboard を Laravel 組込みもうとしていました。
Dashboard を組込むには、その一部の dashboard.css が要ります。
その dashboard.css を単純に、Laravel の public/css/app.css へ含める方法を調べました。
環境
Windows10上 の Laravel Homestead で確認しています。
* Homestead v10.9.1
Laravel Framework 6.18.19
前提条件
-
composer require laravel/ui v1.2.0している。(フロントエンドパッケージをインストールしている)
参考 Laravel 6.x JavaScriptとCSSスカフォールド
https://readouble.com/laravel/6.x/ja/frontend.html
-
npm run devができる。(アセットコンパイルができる)
参考 Laravel 6.x アセットのコンパイル(Mix)
https://readouble.com/laravel/6.x/ja/mix.html
方法
方法は app.scss に含めたいCSSファイルを @import で指定します。
具体的な例です。
含めたいCSSファイルを次の場所に置いたとします。
resources/css/dashboard.css
含めたいCSSファイルをapp.scss に指定します。
次の行を追加します。
パスの指定は app.scss がある位置を基準に、相対パスで指定しています。
@import '../css/dashboard.css';
アセットコンパイルします。
npm run dev を実行します。
アセットコンパイルがうまく行くと、public/css/app.css に、含めたいCSSファイルの内容があるのが、確認できるとおもいます。
おわりに
はじめは Laravel 6.x アセットのコンパイル(Mix) の例にある、webpack.mix.js へ追記して試していました。
そのやり方だと調べたかぎり、一時ファイルに書き出してまたまとめるような記述が要りました。
どうも複雑だなと感じていたら、scssファイルに@import を記述すればそのまま展開してくれることを知り、それでいいやとなりました。
参考 SCSS ファイルから別の SCSS ファイルをインポートする (@import)
https://maku77.github.io/sass/import.html
以上です。