はじめに

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 がある位置を基準に、相対パスで指定しています。

resources/sass/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

以上です。