bootstrap-npm

npm を使った Bootstrap 6 のセットアップ

npm のコマンドラインツールを使い、JavaScript バンドラーを使わずに Sass を CSS にコンパイルする Bootstrap 6 プロジェクトをセットアップします。Bootstrap のビルド済み JS バンドルは <script> タグから直接読み込みます。Node.js とターミナルの基本的な知識が必要です。

ワークフロー

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

---

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

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

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

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

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

3. CSS のコンパイルと後処理を行うツールをインストールします。

   npm i --save-dev autoprefixer postcss postcss-cli sass
   

4. ローカルの開発ツール（監視、スクリプト実行、サーバー、リント）をインストールします。

   npm i --save-dev nodemon npm-run-all sirv-cli stylelint stylelint-config-twbs-bootstrap
   

---

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

mkdir {css,scss}
touch index.html scss/styles.scss postcss.config.js stylelint.config.mjs

目標の構成：

my-project/
├── css/
├── scss/
│   └── styles.scss
├── stylelint.config.mjs
├── index.html
├── package-lock.json
├── package.json
└── postcss.config.js

---

ステップ 3：npm スクリプトと設定ファイルを構成する

1. postcss.config.js — Sass の実行後に Autoprefixer を実行します。

   const autoprefixer = require('autoprefixer')
   
   module.exports = {
     plugins: [
       autoprefixer
     ]
   }
   

2. index.html — コンパイル済み CSS をリンクし、Bootstrap のビルド済み JS バンドルを読み込みます（ここではバンドラーを使わないため、dist を使用します）。

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

3. package.json — スクリプトを追加します。Sass が bootstrap を解決できるよう、--load-path=node_modules を指定します。

   {
     "scripts": {
       "css-compile": "sass --load-path=node_modules --style expanded --source-map --embed-sources scss:css",
       "css-prefix": "postcss --config postcss.config.js --replace \"css/*.css\" \"!css/*.min.css\"",
       "build": "npm-run-all --sequential css-compile css-prefix",
       "watch": "nodemon --watch scss/ --ext scss --exec \"npm run build\"",
       "serve": "sirv --port 8080 --dev .",
       "start": "npm-run-all build --parallel watch serve",
       "lint": "stylelint \"scss/**/*.scss\""
     }
   }
   

4. stylelint.config.mjs：

   /** @type {import('stylelint').Config} */
   export default {
     extends: 'stylelint-config-twbs-bootstrap'
   }
   

5. 開発サーバーを起動します。

   npm start
   

---

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

scss/styles.scss に、モダンな @use ルールを使って追加します（@import は使用しないでください）。

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

with () を使ってトークンをカスタマイズします。変更したいキーだけを含めてください。

@use "bootstrap/scss/bootstrap" with (
  $root-tokens: (
    --border-radius: .25rem,
    --spacer: 1.5rem,
  )
);

トークンマップ（$root-tokens と各コンポーネントの $*-tokens マップ）を使って CSS カスタムプロパティを上書きします。カスタマイズ › Sass に従ってください。Sass ではトークン名に プレフィックスを付けずに 記述します（例：--border-radius、--spacer）。Bootstrap の dist/CDN CSS では PostCSS が --bs- プレフィックスを追加するため、ソースを自分でコンパイルすると、プレフィックスなしの状態が維持されます。

---

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

1. npm start を実行して http://localhost:8080 を開きます。CSS のコンパイルが完了すると、.container と .btn-solid.theme-primary ボタンにスタイルが適用されます。
2. css/styles.css が生成され、scss/styles.scss の編集に合わせて更新されることを確認します（監視が実行されています）。
3. JS バンドルに起因するコンソールエラーがないことを確認します。
4. npm run lint を実行して、Sass が Bootstrap の stylelint 設定に準拠しているか確認します。
5. Bootstrap 6 を使用するには、oklch() と color-mix() に対応したブラウザーが必要です。

Bootstrap のうち使用する部分だけをインポートする最適化ビルドについては、twbs/examples sass-js project を参照してください。