bootstrap-webpack

Name: bootstrap-webpack
Author: twbs

github.com/twbs開発175.0k307 回インストール今日更新

リポジトリ

bootstrap-webpack について

WebpackでBootstrap 6プロジェクトを構築する開発スキルです。Node.jsとターミナルに慣れた開発者向けに、開発サーバー、Sassローダーチェーン、任意の本番最適化を案内します。

主な機能

01WebpackとBootstrap依存関係の導入
02プロジェクトファイル構成の作成
03Webpack開発サーバーの設定
04Sass、CSS、PostCSSローダーの設定
05Bootstrapの読み込みと動作確認
06CSSとインラインSVGの任意抽出

活用シーン

01WebpackでBootstrap 6プロジェクトを作成
02SassコンパイルとAutoprefixerの設定
03CSP要件に応じたCSSとSVG出力の調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/twbs/bootstrap --skill bootstrap-webpack

インストール後、Claude Code で/bootstrap-webpackを入力して読み込まれたか確認します。

詳細

Webpack を使用した Bootstrap 6

Sass の処理に必要なローダーを含め、Webpack でバンドルする Bootstrap 6 プロジェクトをセットアップします。Node.js とターミナルの基本的な操作に慣れている必要があります。

ワークフロー

ステップ 1：npm をセットアップして依存関係をインストールする
ステップ 2：プロジェクト構成を作成する
ステップ 3：Webpack を設定する（ひな形＋開発サーバー）
ステップ 4：ローダーをセットアップして Bootstrap をインポートする
ステップ 5：動作を確認する
ステップ 6（任意）：本番環境向けに最適化する

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

プロジェクトを作成して npm を初期化します。
```
mkdir my-project && cd my-project
npm init -y
```

Webpack とそのツールをインストールします。

npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin

Bootstrap と任意のピア依存関係をインストールします（メニュー、ポップオーバー、ツールチップを使用しない場合は @floating-ui/dom を、日付ピッカーを使用しない場合は vanilla-calendar-pro を省略してください）。
```
npm i --save [email protected] @floating-ui/dom vanilla-calendar-pro
```
Bootstrap の CSS をバンドルするために必要なローダーと Sass／Autoprefixer をインストールします。
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

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

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

目標とする構成：

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

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

webpack.config.js — エントリーポイント、出力、開発サーバーを設定します。

'use strict'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ]
}

src/index.html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Webpack!</h1>
      <button class="btn-solid theme-primary">Primary button</button>
    </div>
  </body>
</html>

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

{
  "scripts": {
    "start": "webpack serve",
    "build": "webpack build --mode=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

Webpack を起動します。
```
npm start
```

ステップ 4：ローダーをセットアップして Bootstrap をインポートする

webpack.config.js に module.rules のローダーチェーンを追加します（順序が重要です。sass-loader はコンパイルし、postcss-loader は Autoprefixer を実行し、css-loader はインポートを解決し、style-loader は CSS を挿入します）。

'use strict'

const path = require('path')
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer
                ]
              }
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
}

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- プレフィックスが追加されるため、ソースを自分でコンパイルすれば、プレフィックスのない状態を維持できます。
src/js/main.js — CSS を読み込み、Bootstrap の JS をインポートします。Floating UI と Vanilla Calendar Pro は Bootstrap を通じて自動的にインポートされます。
```
// Import our custom CSS, then all of Bootstrap’s JS
import '../scss/styles.scss'
import * as bootstrap from 'bootstrap'
```
バンドルサイズを抑えるため、必要なプラグインだけをインポートしてください。
```
import { Tooltip, Toast, Popover } from 'bootstrap'
```

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

npm start を実行して http://localhost:8080 を開きます。.container と .btn-solid.theme-primary ボタンにスタイルが適用されているはずです。
コンソールにモジュール解決やローダーのエラーがないことを確認します。
JS コンポーネント（ツールチップ／ダイアログ）を起動して、JS バンドルが動作することを確認します。
Bootstrap 6 には、oklch() と color-mix() をサポートするブラウザーが必要です。

ステップ 6（任意）：本番環境向けに最適化する

正常に動作するセットアップには必須ではありません。必要な場合にのみ適用してください。

CSS をファイルに抽出する（厳格な CSP の適用や、大きな JS バンドルを避ける場合）：mini-css-extract-plugin をインストールし、style-loader を miniCssExtractPlugin.loader に置き換えてプラグインを追加した後、生成された dist/main.css を HTML からリンクします。
インライン SVG を抽出する：Bootstrap の CSS は data: URI のインライン SVG を参照します。CSP で data: 画像がブロックされる場合は、mimetype: 'image/svg+xml'／scheme: 'data' に一致し、type: 'asset/resource' を指定する Webpack のアセットモジュールルールを追加して、SVG をファイルとして出力します。

完全なリファレンスについては、twbs/examples の Webpack プロジェクトを参照してください。

Markdown 対応

ログインしてコメント

基本情報

作者: twbs
リポジトリ: twbs/bootstrap
カテゴリ: 開発
インストール数: 307
GitHub スター: 175,020

問題を報告