A, Laravel UIを使う場合
composer require laravel/ui
php artisan ui bootstrap
// bootstrap以外にもvueやreactのインストールも可能
npm install
npm run dev
Laravel UIにより、webpack.mix.js
npm run devにより、public/css/app.css
自動で生成されています。
Bootstrapでcssとjsを読み込む。
resources/sass/app.scssを生成。
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
B, Bootstrapのみをインストールする(Laravel UIを使わない)場合
すでに型ができており余計なものをいれたくない、などLaravel UIをいれたくない理由がある場合はこちらになります。
Bootstrap5のインストール
npm install
npm install bootstrap
npm install sass
上記コマンドでもbootstrap5がインストールされる場所。
└── node_modules/
└── bootstrap
├── js
└── scss
Viteの場合
以下追記。
resources\js\bootstrap.js
import 'bootstrap';
resources\sass\app.scssファイル作成後、追記。
resources\sass\app.scss
// Bootstrap
@import 'bootstrap/scss/bootstrap';
修正:
wite.config.jp
~略~
input: [
'resources/css/app.sss',
//'resources/scss/app.scss', //追加不要みたい
'resources/js/app.js',
],
~略~
呼び出し
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
npm run dev
本番にJS/CSSを出力する場合
npm run build
その他方法での利用したい場合、下記公式サイトを参考