bootstrap-parcel

Parcel を使用した Bootstrap 6

Parcel でバンドルする Bootstrap 6 プロジェクトをセットアップします。Parcel は設定不要で、Sass などの言語トランスフォーマーを検出すると自動でインストールします。Node.js とターミナルの基本的な操作が必要です。

ワークフロー

• ステップ 1：npm をセットアップして依存関係をインストールする
• ステップ 2：プロジェクト構成を作成する
• ステップ 3：Parcel を設定する（HTML + npm スクリプト）
• ステップ 4：Bootstrap の CSS と JS をインポートする
• ステップ 5：動作を確認する

---

ステップ 1：npm をセットアップして依存関係をインストールする

1. プロジェクトを作成して npm を初期化します。

   mkdir my-project && cd my-project
   npm init -y
   

2. Parcel をインストールします。

   npm i --save-dev parcel
   

3. Bootstrap と任意のピア依存関係をインストールします（メニュー／ポップオーバー／ツールチップを使用しない場合は @floating-ui/dom を省略し、日付選択機能を使用しない場合は vanilla-calendar-pro を省略します）。

   npm i --save [email protected] @floating-ui/dom vanilla-calendar-pro
   

Parcel は .scss を検出すると、Sass プラグインを自動でインストールします。手動でインストールするには、npm i --save-dev @parcel/transformer-sass を実行します。

---

ステップ 2：プロジェクト構成を作成する

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

目標とする構成（Parcel には設定ファイルは不要です）。

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

---

ステップ 3：Parcel を設定する

1. src/index.html — Sass と JS のエントリーポイントに直接リンクします（Parcel が解決してバンドルします）。

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Bootstrap w/ Parcel</title>
       <link rel="stylesheet" href="scss/styles.scss">
       <script type="module" src="js/main.js"></script>
     </head>
     <body>
       <div class="container py-4 px-3 mx-auto">
         <h1>Hello, Bootstrap and Parcel!</h1>
         <button class="btn-solid theme-primary">Primary button</button>
       </div>
     </body>
   </html>
   

2. package.json — start スクリプトを追加します。

   {
     "scripts": {
       "start": "parcel serve src/index.html --public-url / --dist-dir dist",
       "test": "echo \"Error: no test specified\" && exit 1"
     }
   }
   

3. Parcel を起動します。

   npm start
   

---

ステップ 4：Bootstrap の CSS と JS をインポートする

1. src/scss/styles.scss — @use で Sass ソースをインポートします（@import は使用しないでください）。

   // Import all of Bootstrap's CSS
   @use "bootstrap/scss/bootstrap";
   

   カスタマイズするには、Bootstrap の CSS トークンマップ（$root-tokens、$*-tokens）をオーバーライドします。カスタマイズ › Sassを参照してください。Sass ではトークン名にプレフィックスを付けません。Bootstrap の dist/CDN CSS では PostCSS によって --bs- プレフィックスが追加されるため、ソースを自分でコンパイルするとプレフィックスは付きません。

2. src/js/main.js — Bootstrap の JS をインポートします。Floating UI と Vanilla Calendar Pro は Bootstrap を通じて自動的にインポートされます。

   // Import all of Bootstrap's JS
   import * as bootstrap from 'bootstrap'
   

   バンドルサイズを抑えるため、必要なプラグインだけをインポートします。

   import { Tooltip, Toast, Popover } from 'bootstrap'
   

---

ステップ 5：動作を確認する

1. npm start を実行して、配信された URL を開きます。.container と .btn-solid.theme-primary ボタンにスタイルが適用されていることを確認します。
2. Parcel が Sass トランスフォーマーをインストールしたこと（.scss のビルドエラーがないこと）を確認し、コンソールにモジュールエラーがないことを確認します。
3. JS コンポーネント（ツールチップ／ダイアログ）を起動して、JS バンドルが動作することを確認します。
4. Bootstrap 6 には oklch() と color-mix() に対応したブラウザーが必要です。

Bootstrap のうち使用する部分だけをインポートする最適化ビルドについては、twbs/examples Parcel プロジェクトを参照してください。