Laravel Bootstrap（Viteでの使用）／新規追加機能

Viteでの使用～Bootstrap5設置ガイド

Viteを使用してBootstrapのCSSとJavaScriptをプロジェクトに組み込みバンドルする方法の公式ガイド。

bootstrap-guide.com

npm install
npm install vite
npm install bootstrap @popperjs/core
npm install sass

プロジェクト構造

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

scss/styles.scss

// BootstrapのCSSをすべてインポート
@import "~bootstrap/scss/bootstrap";

s/main.js

// カスタムCSSをインポート
@import　'';
// BootstrapのJSをすべてインポート
@import '';

vite.config.js

const path = require('path')
export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}