yii2-bootstrap5/docs/guide-ja/assets-setup.md

177 lines
6.0 KiB
Markdown
Raw Permalink Normal View History

アセットのセットアップ
======================
Bootstrap エクステンションは、アセットのインストールについて、[Bower](http://bower.io/) および/または [NPM](https://www.npmjs.org/) のパッケージに依存しています。
Bootstrap パッケージを使う前に、これらのパッケージをあなたのプロジェクトにインストールする方法を決定しなければなりません。
## asset-packagist レポジトリを使う
[asset-packagist.org](https://asset-packagist.org) を Bootstrap アセットのソース・パッケージとしてセットアップすることが出来ます。
あなたのプロジェクトの `composer.json` に下記の行を追加して下さい。
```json
"repositories": [
{
"type": "composer",
"url": "https://asset-packagist.org"
}
]
```
そして、アプリケーション構成で `@npm``@bower` を設定します。
```php
return [
//...
'aliases' => [
'@bower' => '@vendor/bower-asset',
'@npm' => '@vendor/npm-asset',
],
//...
];
```
## composer アセット・プラグインを使う
次のコマンドを使って [composer アセット・プラグイン](https://github.com/francoispluchino/composer-asset-plugin/) をグローバルにインストールします。
```
composer global require "fxp/composer-asset-plugin:^1.4.0"
```
Yii を使ってアセットを発行したい場合は、あなたのプロジェクトの `composer.json` に下記の行を追加して、
インストールされるパッケージが置かれるディレクトリを設定します。
```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` に次の行を追加して下さい。
```json
{
...
"dependencies": {
"bootstrap": "4.2.1",
...
}
...
}
```
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
```json
"replace": {
2021-08-05 15:21:05 +08:00
"npm-asset/bootstrap": ">=5.1"
},
```
## CDN を使う
[公式 CDN](https://www.bootstrapcdn.com) から Bootstrap アセットを使うことが出来ます。.
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
```json
"replace": {
2021-08-05 15:21:05 +08:00
"npm-asset/bootstrap": ">=5.1"
},
```
'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルを CDN のリンクでオーバーライドします。
```php
return [
'components' => [
'assetManager' => [
// CDN を使うようにバンドルをオーバーライド
'bundles' => [
2021-08-03 16:22:50 +08:00
'yii\bootstrap5\BootstrapAsset' => [
'sourcePath' => null,
2021-08-05 15:21:05 +08:00
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
'css' => [
'css/bootstrap.min.css'
],
],
2021-08-03 16:22:50 +08:00
'yii\bootstrap5\BootstrapPluginAsset' => [
'sourcePath' => null,
2021-08-05 15:21:05 +08:00
'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 アセットの冗長なインストールを防止します。
```json
"replace": {
2021-08-05 15:21:05 +08:00
"npm-asset/bootstrap": ">=5.1"
},
```
'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルをオーバーライドします。
```php
return [
'components' => [
'assetManager' => [
// バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う
'bundles' => [
2021-08-03 16:22:50 +08:00
'yii\bootstrap5\BootstrapAsset' => [
'sourcePath' => '@app/assets/source/bootstrap/dist',
'css' => [
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
],
],
2021-08-03 16:22:50 +08:00
'yii\bootstrap5\BootstrapPluginAsset' => [
'sourcePath' => '@app/assets/source/bootstrap/dist',
'js' => [
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
]
],
],
],
// ...
],
// ...
];
```
2021-10-12 18:36:47 +08:00
Bootsrap のソース・ファイルを変更した後は、例えば `npm run dist` を使って、必ず[コンパイル](https://getbootstrap.com/docs/5.1/getting-started/contribute/#using-npm-scripts)して下さい。