LoginSignup
6
9

More than 1 year has passed since last update.

LaravelでのBootstrap5の導入方法

Posted at

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

その他方法での利用したい場合、下記公式サイトを参考

6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9