こんにちは

タイトル通り
Laravel８にBootstrap導入時のエラーと解決について
初学者なりに記事を書いていきます。

前提に

Laravel8.xからはTailwindというCSSフレームワークが標準となっています。
以前までは、Bootstrapでした。
Laravel8.xでもBootstrapを使いたい！という場合の
エラーと解決までの話になります。

composer require laravel/ui

php artisan ui bootstrap

すると以下のログが出ます

Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

その後、

npm install && npm run dev

をコマンド入力してok、、
かと思いきや

/Applications/MAMP/htdocs/プロジェクト名/public/css/app.css

// 2行目
@charset "UTF-8";

こいつが原因らしいです。

エラーメッセージを翻訳すると
"ルールまたはセレクターが必要です"、

初学者の自分は

ちょっと意味わからん、、

ということで、

そこには、

"@charset at-規則は、スタイルシートで使う文字エンコーディングを定義します。
この規則はスタイルシートの最初の要素でなければならず、
これより前には文字を一切記述してはいけません。"

との事。

ん！
なら、２行目の

@charset "UTF-8";

を１行目に書いてみると

なんと
エラーが消えました、、笑

ブラウザの方で確認すると
しっかりBootstrap反映されてました。

@charsetについて無知であり
理解しないままのエラー解決？
となりました。

まぁ納得いくはずもなく、、

引き続き調べてみて
また詳細につて
追記できたらと思います。

以上でした。