LaravelでのBootstrap5の導入方法

Laravel

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') }}">
<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
その他方法での利用したい場合、下記公式サイトを参考

コメント