BootStrapをインストールする方法
composerを利用してLaravel UI をインストールする。
1.VSCodeのターミナルかコマンドプロンプトを開く。
2.以下のコマンドを実行する。
composer require laravel/ui
3.3分程度待って、以下が表示されればok。
BootStrapをインストールする
1.VSCodeのターミナルかコマンドプロンプトで、以下のコマンドを実行する。
cd laravelをインストールしたディレクトリまでのファイルパス
↓
php artisan ui bootstrap
2.以下が表示されればok。
<補足>
・laravelをインストールしたディレクトリ直下のpackage.jsonに、以下のような記述がある。
package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@popperjs/core": "^2.11.6",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.56.1",
"vite": "^4.0.0"
}
}
package.json：npmでインストールするパッケージをリスト化したファイル。
3.VSCodeのターミナルかコマンドプロンプトで、以下のコマンドを実行する。
npm install
※このコマンドを実行することで、package.jsonに記述されたパッケージを一括でインストールする。
依存関係の解決も行ってくれる。
4.以下が表示されればok。
ビルドをするための設定を行う。
＜ビルドする理由＞
・BootStrapのソースコードがSassで記述されているため、cssに変換する必要がある。
確認方法：
node_modules/bootstrap/scss を確認する。以下のようなファイルが入っている。
＜ビルドの設定方法＞
1.laravelをインストールしたフォルダ直下のvite.config.jsを開き、以下のように編集する。
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path' // 追加
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.js', // 'resources/sass/app.scss',を左記に変更
],
refresh: true,
}),
],
resolve: { // 追加ここから
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
}, // 追加ここまで
});
2.resources/jsのapp.jsを開き、以下を追加する。
app.js
import '../sass/app.scss'
ビルドを実行する。
1.ターミナルかコマンドプロンプトで以下を実行する。
npm run build
2.以下が表示されればok。
ビルドしたファイルをビューに読み込む
〇〇.blade.phpの<head>内に、以下を追加する。
〇〇.blade.php
@vite(['resources/js/app.js'])
補足：Sassファイルを編集したら、必ずビルドする。
resources/sass内の、app.scss や _variables.scssを編集したら必ずビルドする。