Laravel 11 + Vue 3プロジェクトにSassとBootstrap 5を導入する方法

# 概要
チーム開発では、見た目の統一感も重要です。本記事では、Laravel 11とVue 3を使用したプロジェクトにSassとBootstrap 5を導入し、効率的にスタイルを管理する方法を解説します。

# 目的

この記事の目的は、Laravel 11とVue 3を使用したプロジェクトに**Sass**と**Bootstrap 5**を導入し、効率的かつ統一感のあるデザインを適用する方法を学ぶことです。

特に、筆者自身がプロジェクトで**Bootstrap 5をよく使うことが多い**ため、この記事ではTailwind CSSではなくBootstrap 5を採用しています。Bootstrapの柔軟なグリッドシステムやUIコンポーネントを活用し、迅速にスタイルを適用する方法を解説します。

具体的には以下を達成します：

1. **Bootstrap 5の導入と基本設定**  
   - LaravelとVue 3プロジェクトでBootstrap 5を使用してデザインを効率化。
   - 必要に応じてBootstrapのスタイルをカスタマイズ。

2. **Sassによるスタイルの拡張**  
   - Sassを使用して、柔軟でモジュール化されたスタイルを作成。
   - プロジェクト全体で再利用可能なスタイル設計を実現。

3. **Vueコンポーネントと統一スタイルの統合**  
   - Vue 3コンポーネントでBootstrapとSassのスタイルを効率的に組み合わせる方法を学習。

この設定により、デザイン作業を効率化し、プロジェクト全体で統一感を持たせることができます。

---

# 前提条件

この記事を進めるにあたり、以下の条件が満たされていることを確認してください：

1. **LaravelとVue 3のプロジェクトがセットアップ済みであること**  
   - [Laravel + Vue3 チーム開発を効率化！統一環境構築と品質向上の完全ガイド](https://qiita.com/ukei2021/items/4b2f047c72dd17c571c7)
   - [DockerでPHP 8.4/Nginx + Node 22 + MySQL環境を構築する方法](https://qiita.com/ukei2021/items/49eb61e4db221346dfe0)
   - [Laravel 11 + Inertia.js + Vue 3 + TypeScriptでモダンなフルスタック環境を構築](https://qiita.com/ukei2021/items/ca36f47975e5fc5ff16e) で紹介した手順を完了していること。

2. **開発環境が適切に動作していること**  
   - Dockerを使用している場合、以下のコンテナが正常に稼働している：
     - backend-container
     - frontend-container

3. **ディレクトリ構成が整っていること**  
   プロジェクトの`src`ディレクトリが以下のような構成になっている：

# 具体的な作業

## 準備

現在のディレクトリ構成は以下のようになっています：

```
rootdir
  ├─ docker
  │    └─ docker
  └─ src
       └─ laravel/Inertia/Vue/TypeScript
```

### コンテナの起動

以下のコマンドでDockerコンテナを起動します：
```
$ cd docker
$ docker-compose up --build -d
```
### bootstrap5/sassのインストール
まず、フロントエンドのコンテナに接続します：
```
$ docker exec -it frontend-container /bin/bash
```
次に、Bootstrap 5とSassをインストールします：
```
$ npm install bootstrap@^5.3.3 sass@^1.83.0
```
実行結果例：
```
added 10 packages, and audited 316 packages in 11s

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

found 0 vulnerabilities
```

## ソースコードの修正
#### **`vite.config.js`**
```vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    logLevel: 'error',
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/css/app.css',
                'resources/js/app.ts',
            ],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            overlay: true,
        },
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        },
    },
});
```
##### 補足
- inputにapp.scssを追加: Sassファイルをビルド対象に指定します。
- エイリアス~bootstrap: Bootstrap関連のモジュールを簡単にインポート可能にします。


#### **`resources/css/app.css`**
BootstrapのCSSをインポートし、既存のTailwind設定をコメントアウトします：
```app.css
/*
@tailwind base;
@tailwind components;
@tailwind utilities;
*/
@import 'bootstrap/dist/css/bootstrap.min.css';
```
##### 補足
- Tailwindを併用する場合はコメントを外してください。


#### **`resources/sass/app.scss`**
sassのコードはこちらに書いていくようにファイルのみを作る
ちなみにこちらにbootstrapをimportするとviteでwarningでまくるので、気にならないならこっちでimportした方が良いかもです。
```app.scss
body {
    h2 {
        margin: 0;
        padding: 0.5rem;
        color:#2ecc71;
    }
}
```
##### 補足
- Bootstrapのインポートについて: app.scssにBootstrapをインポートするとViteで警告が出る場合があります。気にならない場合は以下のコードを追加してください：
```sass
@import '~bootstrap/scss/bootstrap';
```

#### **`resources/views/app.blade.php`**
`@vite`ディレクティブに`app.scss`を追加します：
```html:app.blade.php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Laravel + Inertia</title>
        @vite(['resources/sass/app.scss', 'resources/css/app.css', 'resources/js/app.ts'])
    </head>

    <body>
        @inertia
    </body>
</html>
```

#### **`resources/js/Pages/SamplePage.vue`**
```SamplePage.vue
<template>
    <div class="container mt-5">
        <h1 class="text-primary">{{ message }}</h1>
        <h2>sass test</h2>
        <button class="btn btn-success" @click="checkType">Click Me</button>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
    name: 'SamplePage',
    props: {
        message: {
            type: String as PropType<string>,
            required: true,
        },
    },
    methods: {
        checkType() {
            const value: number = 1;
            console.log(value);
            const unusedVar = 'This is not used';
            console.log(unusedVar);
        },
    },
});
</script>
<style scoped>

</style>
```

##### 補足
- Bootstrapのクラス確認: container, text-primary, btn-successなどのクラスが正常に適用されるか確認してください。
- Sassの動作確認: h2タグに対してカスタムスタイルが適用されているか確認します。

# 確認

### コンテナの再起動

以下のコマンドでフロントエンドコンテナを再起動します：

```bash
$ docker restart frontend-container
```

#### 動作確認
ブラウザで以下のURLにアクセスしてください：
[http://localhost/sample](http://localhost/sample)

#### 期待される画面
以下の画面が表示されれば、Bootstrap 5が正常に適用され、Sassのカスタマイズも反映されていることが確認できます：


![スクリーンショット 2025-01-04 17.58.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032988/133df0e1-3815-d361-5e26-95b7ab29c175.png)

#### 確認ポイント
1.Bootstrapの確認:

- ボタンのスタイル（btn-success）や、text-primaryクラスが正常に適用されているか確認してください。
2. Sassの確認:

- h2タグにカスタマイズされたスタイル（color: #2ecc71）が適用されていることを確認してください。
##### 補足
- もしスタイルが反映されない場合、ブラウザのキャッシュをクリアして再読み込みしてください。
- SassやBootstrapのインポートにエラーがある場合は、frontend-containerのログを確認してください：
```
$ docker logs frontend-container
```

これでBootstrap 5とSassが正常に導入されていることを確認できます！


# まとめ

この記事では、Laravel 11 + Vue 3プロジェクトにBootstrap 5とSassを導入し、効率的かつ統一感のあるデザイン環境を構築しました。以下のポイントを押さえることができました：

### **Bootstrap 5とSassの導入**
- Bootstrap 5を活用して、迅速にスタイルを適用できる環境を構築。
- Sassを用いた柔軟でモジュール化されたスタイル設計を実現。

### **Vueコンポーネントとの統合**
- Vue 3コンポーネントでBootstrapとSassのスタイルを効率的に組み合わせる方法を学習。
- 実際にサンプルページを作成し、カスタムスタイルが正常に動作することを確認。

### **デザイン効率の向上**
- 再利用可能なスタイルの設計により、プロジェクト全体のデザイン効率を向上。
- TailwindではなくBootstrapを採用する理由も共有し、現場での実践に役立つ知見を提供。

この記事を参考にすることで、デザイン面での作業効率が大幅に向上し、チーム全体で統一感のあるUIを実現できます。

---

### 次の記事の紹介

ここまででLaravel 11 + Vue 3のデザイン環境が整いました。次の記事では、**Laravelでテストコード込みのサービス・リポジトリパターンを実装する方法**について解説します。

### **次の記事はこちら**  
[Laravelでテストコード込みのサービス・リポジトリパターンを実装する方法](https://qiita.com/ukei2021/items/53d3776f580cfd3a074b)

この記事では、以下のポイントを解説予定です：

- **サービス・リポジトリパターンの導入理由**  
  保守性や拡張性を向上させる設計パターンの基礎を学びます。

- **実践的な実装例**  
  実際のLaravelプロジェクトをベースに、サービスとリポジトリの具体的な設計と実装方法を紹介します。

- **テストコードの実装**  
  各コンポーネントを効率的にテストする方法を解説し、品質向上を目指します。

引き続き良かったら読んでください！

### 関連記事
- [Laravel + Vue3 チーム開発を効率化！統一環境構築と品質向上の完全ガイド](https://qiita.com/ukei2021/items/4b2f047c72dd17c571c7)
- [DockerでPHP 8.4/Nginx + Node 22 + MySQL環境を構築する方法](https://qiita.com/ukei2021/items/49eb61e4db221346dfe0)
- [Laravel 11 + Inertia.js + Vue 3 + TypeScriptでモダンなフルスタック環境を構築](https://qiita.com/ukei2021/items/ca36f47975e5fc5ff16e)
- [Laravelでテストコード込みのサービス・リポジトリパターンを実装する方法](https://qiita.com/ukei2021/items/53d3776f580cfd3a074b)
- [DevContainerを使いVSCodeでPHPStan・ESLint・TypeScriptを統合して静的解析をエラー検知する方法](https://qiita.com/ukei2021/items/d3a91b0a34188529b6f6)
- [Gitコミット時に自動チェック！HuskyでESLint・PHPStan・ユニットテストを効率化する方法](https://qiita.com/ukei2021/items/592b50cbe04aaeae575f)