建置工具
瞭解如何使用 Bootstrap 內建的 npm 腳本來建置我們的文件、編譯原始碼、執行測試等。
工具設定
Bootstrap 使用 npm 腳本 作為其建置系統。我們的 package.json 包含了使用此架構的便利方法，包括編譯程式碼、執行測試等。
若要使用我們的建置系統並在本地執行我們的文件，您需要一份 Bootstrap 的原始檔案和 Node。請按照下列步驟操作，您應該就能開始使用了
- 下載並安裝 Node.js，我們使用它來管理我們的相依性。
- 您可以 下載 Bootstrap 的原始碼 或 分岔 Bootstrap 的儲存庫。
- 導航到根目錄
/bootstrap目錄並執行npm install來安裝我們在 package.json 中列出的本地相依性。
完成後，您將能夠執行從命令列提供的各種命令。
使用 npm 腳本
我們的 package.json 包含以下命令和工作
| 工作 | 說明 |
|---|---|
npm run dist |
npm run dist 使用編譯的檔案建立 /dist/ 目錄。使用 Sass、Autoprefixer 和 terser。 |
npm test |
執行 npm run dist 後，在本地執行測試 |
npm run docs-serve |
在本地建置並執行文件。 |
執行 npm run 以查看所有 npm 腳本。
Sass
Bootstrap v4 使用 Node Sass 將我們的 Sass 原始檔編譯成 CSS 檔（包含在我們的建置程序中）。為了在使用自己的資產管線編譯 Sass 時產生相同的 CSS，您需要使用支援至少與 Node Sass 相同功能的 Sass 編譯器。這一點很重要，因為截至 2020 年 10 月 26 日，LibSass 和建構在其上的套件（包括 Node Sass）已 停用。
如果您需要較新的 Sass 功能或與較新 CSS 標準相容，Dart Sass 現在是 Sass 的主要實作，並支援與 Node Sass 完全相容的 JavaScript API（除了 Dart Sass 的 GitHub 頁面 上列出的少數例外）。
我們將 Sass 捨入精度提高到 6（預設為 Node Sass 中的 5），以防止瀏覽器捨入問題。如果您使用 Dart Sass，則無需調整，因為該編譯器使用捨入精度 10，且出於效率考量，不允許調整。
Autoprefixer
Bootstrap 使用 Autoprefixer（包含在我們的建置程序中），在建置時自動將供應商前綴新增到某些 CSS 屬性。這樣可以節省時間和程式碼，因為我們可以一次撰寫 CSS 的主要部分，同時無需使用 v3 中的供應商混合。
我們在 GitHub 儲存庫中的獨立檔案中維護透過 Autoprefixer 支援的瀏覽器清單。請參閱 .browserslistrc 以取得詳細資料。
本地文件
在本地執行我們的文件需要使用 Hugo，它透過 hugo-bin npm 套件安裝。Hugo 是一個極快且可擴充的靜態網站產生器，提供給我們：基本包含、基於 Markdown 的檔案、範本等。以下是開始使用的方法
- 執行上述 工具設定 以安裝所有相依性。
- 從根目錄
/bootstrap，在命令列中執行npm run docs-serve。 - 在瀏覽器中開啟
http://localhost:9001/，瞧。
閱讀其 文件，進一步了解如何使用 Hugo。
疑難排解
如果您在安裝相依性時遇到問題，請解除安裝所有先前的相依性版本（全域和本機）。然後，重新執行 npm install。