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

閱讀時間約 4 分鐘


為甚麼寫這篇文章?

這篇文章更偏向純紀錄性質,方便日後有需要時直接複製相同指令來完成 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">





開始使用 !🎉🎉🎉


2會員
21內容數
關於 Html 、 Css 、JS 等相關程式語言的學習筆記或開發紀錄
留言0
查看全部
發表第一個留言支持創作者!