正式排版後變數的改變以及 Sass 錯誤的排除方式

CH12 116
課程練習下載
Bootstrap 路徑 : Components / Theming

解決安裝 gulp 與 Node.js 環境後,網頁排版無法正常顯示

Bootstrap-gulp環境網頁排版無法正常顯示01

Bootstrap-gulp環境網頁排版無法正常顯示02

  • 開啟 package.json 可見 "bootstrap" : "^4.0.0" ,bootstrap 已更新到第四版,但練習的範本中變數還未做更新
  • 指令 npm install ,看到新版 BS4 檔案安裝到 node_modules / Bootstrap
  • 開啟 node_modules / Bootstrap : _variables.scss (此為 npm 內的變數 ) 和 source / helper : _variables.scss ( 此為我們的變數 ) 這兩個檔案。 把官方 _variables.scss 整個複製貼至 我方的 _variables.scss 內即可運作。切記 : 我方客製化 _variables.scss 內有做更改的部分需要先備份複製完後再進行修改
  • 可先執行指令 Ctrl + cgulp 開啟

在變數中顏色修改

路徑 : source / helper : _variables.scss

  • $theme-colors 內自行加入一個客製色,例如六角主題色 #00cc99 ,記得後方需要加入逗點。
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "hex" :       #00cc99,   
  ),
  $theme-colors
);

變數中做顏色刪除

路徑 : Bootatrap / Theming : Remove form map

  • 主題色頁可做刪除,可在前方加入 // 或直接刪除,但有些主題色是不能被刪除的,像 success 與 danger 設定不能刪除的如果直接刪掉或註解掉,終端機會顯示錯誤 。這時可用 remove form map 的方式。
  • BS4 中 remove form map 需要把 $theme-colors: map-remove($theme-colors, "info", "light", "dark"); 加入 source / stylesheets / helpers : all.scss 檔案中而非舊版的 _variables.scss 內

Bootstrap-remove form map位置

BS 官方指示
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";

注意事項

  • 原始檔案都在 source 資料夾內,盡可能不要在 public 資料夾內做調整

自我統整 | 部屬 gulp 環境 & 修復變數改變造成網頁排版無法正常顯示

環境 : 電腦已安裝 Node.js

  1. 從 課程練習 下載壓縮檔,以 VSCode 開啟
  2. Ctrl + 開啟終端機 → npm install gulp -g 安裝 Gulp 相關環境 ( Windows ) → npm install`gulp“ 開啟網頁
    1. sudo npm install gulp -g 安裝 Gulp 相關環境 ( Mac )
  3. 開啟網頁會發現網頁排版走鐘,是因為 Bootstrap 已更新到第四版,但練習的範本中變數還未做更新
  4. 開啟 node_modules / Bootstrap : _variables.scss (此為 npm 內的變數 ) 和 source / helper : _variables.scss ( 此為我們的變數 ) 這兩個檔案。 把官方 _variables.scss 整個複製貼至 我方的 _variables.scss 內即可運作。切記 : 我方客製化 _variables.scss 內有做更改的部分需要先備份複製完後再進行修改

VSCode 內 gulp 環境資料夾介紹

  • 資料夾 node_modules : 用 npm 下載的資料夾
  • 資料夾 public : 內為編譯後的檔案
  • 資料夾 .publisg : 直接部屬到 github 所使用的
  • 指令 gulp deploy → 會直接把我們的頁面部屬到 Github page 上

Bootstrap-運行glup前後資料夾顯示狀態


資料來源

最後修改日期: 12 6 月, 2020

作者