こんにちは
タイトル通り
Laravel８にBootstrap導入時のエラーと解決について
初学者なりに記事を書いていきます。
前提に
Laravel8.xからはTailwindというCSSフレームワークが標準となっています。
以前までは、Bootstrapでした。
Laravel8.xでもBootstrapを使いたい！という場合の
エラーと解決までの話になります。
開発環境
- mac os
- MAMP
- Laravel８系
Bootstrapのインストール
- Composerを使ってインストール
composer require laravel/ui
- artisanコマンドを実行
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";
こいつが原因らしいです。
エラーメッセージを翻訳すると
"ルールまたはセレクターが必要です"、
初学者の自分は
ちょっと意味わからん、、
ということで、
@charseについてググってみる事に
記事はこちらを参照しました。
https://developer.mozilla.org/ja/docs/Web/CSS/@charset
そこには、
"@charset at-規則 は、スタイルシートで使う文字エンコーディングを定義します。
この規則はスタイルシートの最初の要素でなければならず、
これより前には文字を一切記述してはいけません。"
との事。
ん！
なら、２行目の
@charset "UTF-8";
を１行目に書いてみると
なんと
エラーが消えました、、笑
ブラウザの方で確認すると
しっかりBootstrap反映されてました。
@charsetについて無知であり
理解しないままのエラー解決？
となりました。
まぁ納得いくはずもなく、、
引き続き調べてみて
また詳細につて
追記できたらと思います。
以上でした。