［前端］終端機指令紀錄_使用 npm 將 Bootstrap5 與 Sass 引入專案

為甚麼寫這篇文章?

這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。

Bootstrap 版本 5.3.1

Sass 版本 1.66.1

過程記錄 開始!

• 安裝 Bootstrap

npm install bootstrap@v5.3.1

• 安裝 Sass

npm i sass

• 將 Sass 安裝在全域不只是這個專案

npm install -g sass

把原本安裝的 Sass 移除

npm uninstall sass

• Sass 編譯成 Css

sass ./scss/all.scss ./templates/all.css

• 在 all.scss 引入必要的 Bootstrap scss 檔案

// customize.scss
// 引入 bootstrap 預設的 variables、functions、 mixins
// 我們同時可以運用裡面的 function、mixins 來精簡我們的 scss 內容，color, svg, media-breakpoint-up 等
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";

• 執行 Sass 檔案的監聽 (Ctrl+c 停止 )

sass  --watch ./scss/all.scss ./templates/all.css

• 依專案需求選擇填入所需要的 Bootstrap scss 檔案

// Optional
// Layout & components
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";

• 在 html 加入 css link

<link rel="stylesheet" href="templates/all.css">

開始使用 !🎉🎉🎉