概要

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

目的

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

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

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

Bootstrap 5の導入と基本設定
- LaravelとVue 3プロジェクトでBootstrap 5を使用してデザインを効率化。
- 必要に応じてBootstrapのスタイルをカスタマイズ。
Sassによるスタイルの拡張
- Sassを使用して、柔軟でモジュール化されたスタイルを作成。
- プロジェクト全体で再利用可能なスタイル設計を実現。
Vueコンポーネントと統一スタイルの統合
- Vue 3コンポーネントでBootstrapとSassのスタイルを効率的に組み合わせる方法を学習。

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

前提条件

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

LaravelとVue 3のプロジェクトがセットアップ済みであること
- Laravel + Vue3 チーム開発を効率化！統一環境構築と品質向上の完全ガイド
- DockerでPHP 8.4/Nginx + Node 22 + MySQL環境を構築する方法
- Laravel 11 + Inertia.js + Vue 3 + TypeScriptでモダンなフルスタック環境を構築で紹介した手順を完了していること。
開発環境が適切に動作していること
- Dockerを使用している場合、以下のコンテナが正常に稼働している：
  - backend-container
  - frontend-container
ディレクトリ構成が整っていること
プロジェクトの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で警告が出る場合があります。気にならない場合は以下のコードを追加してください：

@import '~bootstrap/scss/bootstrap';

`resources/views/app.blade.php`

@viteディレクティブにapp.scssを追加します：

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タグに対してカスタムスタイルが適用されているか確認します。

確認

コンテナの再起動

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

$ docker restart frontend-container

動作確認

ブラウザで以下のURLにアクセスしてください：
http://localhost/sample

期待される画面

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

確認ポイント

1.Bootstrapの確認:

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

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でテストコード込みのサービス・リポジトリパターンを実装する方法

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

サービス・リポジトリパターンの導入理由
保守性や拡張性を向上させる設計パターンの基礎を学びます。
実践的な実装例
実際のLaravelプロジェクトをベースに、サービスとリポジトリの具体的な設計と実装方法を紹介します。
テストコードの実装
各コンポーネントを効率的にテストする方法を解説し、品質向上を目指します。

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

関連記事