ビルドツール

ツーリングのセットアップ

Bootstrap は、ビルド システムにnpm スクリプトを使用します。package.jsonには、コードのコンパイル、テストの実行など、フレームワークを操作するための便利なメソッドが含まれています。

ビルド システムを使用してドキュメントをローカルで実行するには、Bootstrap のソース ファイルと Node.js のコピーが必要です。次の手順に従ってください。ロックする準備ができているはずです。

1. 依存関係の管理に使用する Node.js をダウンロードしてインストールします。
2. Bootstrap のソースをダウンロードするか、 Bootstrap のリポジトリをフォークします。
3. ルート/bootstrapディレクトリに移動して実行し、 package.jsonnpm installにリストされているローカルの依存関係をインストールします。

完了すると、コマンド ラインから提供されるさまざまなコマンドを実行できるようになります。

npm スクリプトの使用

package.jsonには、プロジェクトを開発するための多数のタスクが含まれています。実行npm runして、ターミナル内のすべての npm スクリプトを表示します。主なタスクは次のとおりです。

サス

Bootstrap はDart Sassを使用して Sass ソース ファイルを CSS ファイルにコンパイルします (ビルド プロセスに含まれます)。独自のアセット パイプラインを使用して Sass をコンパイルする場合は、同じことを行うことをお勧めします。以前は Bootstrap v4 に Node Sass を使用していましたが、LibSass とその上に構築された Node Sass を含むパッケージは非推奨になりました。

Dart Sass は 10 の丸め精度を使用しており、効率上の理由からこの値の調整は許可されていません。縮小など、生成された CSS のさらなる処理中にこの精度を下げることはありませんが、そうする場合は、ブラウザーの丸めの問題を防ぐために、少なくとも 6 の精度を維持することをお勧めします。

オートプレフィクサー

Bootstrap はAutoprefixer (ビルド プロセスに含まれています) を使用して、ビルド時に一部の CSS プロパティにベンダー プレフィックスを自動的に追加します。そうすることで、v3 に見られるようなベンダー mixin の必要性を排除しながら、CSS の主要部分を一度に記述できるようになるため、時間とコードを節約できます。

Autoprefixer でサポートされているブラウザーのリストは、GitHub リポジトリ内の別のファイルに保持されています。詳細については、 .browserslistrcを参照してください。

RTLCSS

Bootstrap はRTLCSSを使用して、コンパイルされた CSS を処理し、それらを RTL に変換します。基本的に、水平方向を認識するプロパティ (例: padding-left) を反対のものに置き換えます。これにより、CSS を 1 回だけ記述し、RTLCSSコントロールと値のディレクティブを使用して微調整を行うことができます。

ローカル ドキュメント

ドキュメントをローカルで実行するには、 hugo-bin npm パッケージを介してインストールされる Hugo を使用する必要があります。Hugo は、基本的なインクルード、Markdown ベースのファイル、テンプレートなどを提供する、非常に高速で非常に拡張可能な静的サイト ジェネレーターです。開始方法は次のとおりです。

1. 上記のツール設定を実行して、すべての依存関係をインストールします。
2. ルート/bootstrapディレクトリからnpm run docs-serve、コマンド ラインで実行します。
3. ブラウザで開いhttp://localhost:9001/てください。

Hugo のドキュメントを読んで、Hugo の使用方法について詳しく学んでください。

トラブルシューティング

依存関係のインストールで問題が発生した場合は、以前のすべての依存関係バージョン (グローバルおよびローカル) をアンインストールします。その後、再実行しnpm installます。