アセットのセットアップ

Bootstrap エクステンションは、アセットのインストールについて、Bower および/または NPM のパッケージに依存しています。 Bootstrap パッケージを使う前に、これらのパッケージをあなたのプロジェクトにインストールする方法を決定しなければなりません。

asset-packagist レポジトリを使う

asset-packagist.org を Bootstrap アセットのソース・パッケージとしてセットアップすることが出来ます。

あなたのプロジェクトの composer.json に下記の行を追加して下さい。

"repositories": [
    {
        "type": "composer",
        "url": "https://asset-packagist.org"
    }
]

そして、アプリケーション構成で [@npm](https://github.com/npm) と [@bower](https://github.com/bower) を設定します。

return [
    //...
    'aliases' => [
        '[@bower](https://github.com/bower)' => '[@vendor](https://github.com/vendor)/bower-asset',
        '[@npm](https://github.com/npm)'   => '[@vendor](https://github.com/vendor)/npm-asset',
    ],
    //...
];

composer アセット・プラグインを使う

次のコマンドを使って composer アセット・プラグイン をグローバルにインストールします。

composer global require "fxp/composer-asset-plugin:^1.4.0"

Yii を使ってアセットを発行したい場合は、あなたのプロジェクトの composer.json に下記の行を追加して、 インストールされるパッケージが置かれるディレクトリを設定します。

"extra": {
    "asset-installer-paths": {
        "npm-asset-library": "vendor/npm",
        "bower-asset-library": "vendor/bower"
    }
}

これで、composer install/update コマンドを実行すると、Bootstrap のアセットを取得することが可能になります。

Note: fxp/composer-asset-plugin は asset-packagist に比べると、composer update コマンドを著しく遅くさせます。

Bower/NPM クライアントを直接に使う

Bower または NPM のクライアントを直接に使って Bootstrap のアセットをインストールすることが出来ます。 あなたのプロジェクトの package.json に次の行を追加して下さい。

{
    ...
    "dependencies": {
        "bootstrap": "4.2.1",
        ...
    }
    ...
}

あなたのプロジェクトの package.json に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。

"replace": {
    "npm-asset/bootstrap": ">=5.1"
},

CDN を使う

公式 CDN から Bootstrap アセットを使うことが出来ます。.

あなたのプロジェクトの package.json に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。

"replace": {
    "npm-asset/bootstrap": ">=5.1"
},

'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルを CDN のリンクでオーバーライドします。

return [
    'components' => [
        'assetManager' => [
            // CDN を使うようにバンドルをオーバーライド 
            'bundles' => [
                'yii\bootstrap5\BootstrapAsset' => [
                    'sourcePath' => null,
                    'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
                    'css' => [
                        'css/bootstrap.min.css'
                    ],
                ],
                'yii\bootstrap5\BootstrapPluginAsset' => [
                    'sourcePath' => null,
                    'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
                    'js' => [
                        'js/bootstrap.bundle.min.js'
                    ],
                ],
            ],
        ],
        // ...
    ],
    // ...
];

.sass ファイルからコンパイルする

Bootstrap CSS ソースを直接にカスタマイズしたい場合、ソースの *.sass ファイルから CSS をコンパイルしたいと思うことがあるでしょう。

そのような場合は、Bootstrap アセットを Composer や Bower/NPM からインストールしても意味がありません。 なぜなら、vendor ディレクトリ内のファイルは変更できないからです。 Bootstrap アセットを手作業でダウンロードし、プロジェクト・ソース・コード内のどこか、 例えば assets/source/bootstrap フォルダに置かなければなりません。

あなたのプロジェクトの package.json に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。

"replace": {
    "npm-asset/bootstrap": ">=5.1"
},

'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルをオーバーライドします。

return [
    'components' => [
        'assetManager' => [
            // バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う
            'bundles' => [
                'yii\bootstrap5\BootstrapAsset' => [
                    'sourcePath' => '[@app](https://github.com/app)/assets/source/bootstrap/dist',
                    'css' => [
                        YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
                    ],
                ],
                'yii\bootstrap5\BootstrapPluginAsset' => [
                    'sourcePath' => '[@app](https://github.com/app)/assets/source/bootstrap/dist',
                    'js' => [
                        YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
                    ]
                ],
            ],
        ],
        // ...
    ],
    // ...
];

Bootsrap のソース・ファイルを変更した後は、例えば npm run dist を使って、必ずコンパイルして下さい。