More than 1 year has passed since last update.

Laravel10のプロジェクトにBootstrapを適用するまでの手順

Posted at 2023-09-09

前提

Bootstrapをインストールしたいプロジェクトに移動

cd {プロジェクト名}

下記コマンドを実行

composer require laravel/ui

下記コマンドを実行

php artisan ui bootstrap

実行結果として、 package.json にBootstrapが追加される

"devDependencies": {
    ・・・
    "bootstrap": "^5.2.3",
    ・・・
}

下記コマンドを実行

npm install

実行結果

-> % npm install

up to date, audited 39 packages in 619ms

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

CSSを適用するために、 <head></head> 内に
@vite(['resources/sass/app.scss', 'resources/js/app.js'])を追加

<!DOCTYPE html>
<html lang="ja">
<head>
    ・・・
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    ・・・
</head>

Laravel10では、Laravel MixではなくViteを使用しているため、public/css/app.cssにスタイルが出力されない
したがって、bladeファイルでは resources/sass/app.scss のファイルパスを指定している

下記コマンドを実行し、CSSやJSをHTMLに適用

npm run dev

ちなみに上記コマンドは、ファイルの変更を自動的に検知して開いているブラウザへ即時に適用してくれる
Laravel Mixでいうところの npm run watch と同じ意味合いですかね

手順5までを実行すると、CSSやJSが画面上に反映されているはずです