【Laravel】Bootstrapが使えなくなった時の原因と解決法

LaravelでBootstrapを使っていたが、
いきなりBootstrapが適用されなくなった。

先程解決したので、原因と解決法を記す。

原因

下記のいずれかのコマンドを実行したのが原因。

• npm run build
• npm run dev

何故なら、上記コマンド実行時に

• vite.config.js（ディレクトリ直下）
• resources/js/app.js
  この2つのファイルが書き換えられたから。

解決法

下記ファイルを書き換えて、
npm run buildを実行したら
うまくいった。

vite.config.js

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
+ import path from 'path'
  import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },   
+	resolve: {
+		alias: {
+			'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
+			vue: 'vue/dist/vue.esm-bundler.js'
+		}
+	}
});

コンマの位置が正しいか確認した方が良い。

resources/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

  import './bootstrap';
+ import '../sass/app.scss'

import { createApp } from 'vue';

/**
 * Next, we will create a fresh Vue application instance. You may then begin
 * registering components with the application instance so they are ready
 * to use in your application's views. An example is included for you.
 */

const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
//     app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
// });

/**
 * Finally, we will attach the application instance to a HTML element with
 * an "id" attribute of "app". This element is included with the "auth"
 * scaffolding. Otherwise, you will need to add an element yourself.
 */

app.mount('#app');